默认布局：主题设置组件（抽屉组件）
主题设置组件使用 Element Plus 的 el-drawer 作为容器，内部通过 el-form 组织各项设置。每项设置使用不同的表单控件：颜色选择器（ColorPicker）、开关（Switch）、滑块（Slider），以及用纯 CSS 实现的导航模式选择器。这个组件的开发难点不在功能逻辑，而在于布局对齐和样式微调。
Drawer 基础配置
<template>
<Iconify
icon="mdi:brush"
class="text-xl cursor-pointer mr-2"
@click="drawer = true"
/>
<el-drawer
v-model="drawer"
title="主题设置"
direction="rtl"
>
<!-- 设置项内容 -->
</el-drawer>
</template>
<script setup lang="ts">
const drawer = ref(false)
</script>
vue
Drawer 的 direction 属性控制打开方向，rtl（Right To Left）表示从右侧滑出，这也是默认值。其他可选值包括 ltr（左）、ttb（上）、btt（下）。
Settings 数据结构
使用 reactive 创建响应式的设置对象：
interface Settings {
theme: string // 主题颜色
darkMode: boolean // 暗黑模式
mode: 'sider' | 'mixed' | 'top' | 'mixedBar' // 导航模式
menuBg: string // 菜单背景
menuWidth?: number // 菜单宽度
showLogo: boolean // 显示 Logo
showTabs: boolean // 显示标签页
fixedHeader: boolean // 头部固定
showBreadcrumb: boolean // 显示面包屑
}
const form = reactive<Settings>({
theme: '#409EFF',
darkMode: false,
mode: 'sider',
menuBg: '#ffffff',
showLogo: false,
showTabs: true,
fixedHeader: false,
showBreadcrumb: true,
})
typescript
Form 表单布局
每项设置使用 el-form-item 包裹，通过 label 属性设置标题：
<el-form :model="form" label-position="top">
<!-- 主题颜色 -->
<el-form-item label="主题颜色">
<el-color-picker v-model="form.theme" />
</el-form-item>
<!-- 暗黑模式 -->
<el-form-item label="暗黑模式">
<el-switch v-model="form.darkMode" />
</el-form-item>
<!-- 菜单宽度 -->
<el-form-item label="菜单宽度">
<el-slider v-model="form.menuWidth" :input-size="'small'" />
</el-form-item>
<!-- 显示Logo -->
<el-form-item label="显示Logo">
<el-switch v-model="form.showLogo" />
</el-form-item>
</el-form>
vue
表单项右对齐
默认情况下 el-form-item 的内容左对齐。要让所有设置项右对齐，使用深度选择器覆盖：
:deep(.el-form-item__content) {
justify-content: flex-end;
}
scss
Slider 的 input-size
el-slider 内置了一个数字输入框，默认尺寸较大。设置 input-size="small" 让它变小：
<el-slider v-model="form.menuWidth" input-size="small" />
vue
导航模式选择器
导航模式使用纯 CSS 实现，提供四种布局模式的选择：
| 模式 | 说明 | 视觉特征 |
|---|---|---|
| sider | 左侧菜单模式 | 左侧深色侧栏 |
| mixed | 顶部左侧混合 | 顶部 + 左侧各有一部分 |
| top | 顶部菜单模式 | 菜单完全在顶部 |
| mixedBar | 左侧菜单混合 | 左侧侧栏 + 顶部混合 |
CSS 实现原理
每个模式用一个小方块表示，方块内部通过 absolute 定位的色块模拟布局：
.nav-mode-item {
@apply relative w-12 h-12 rounded overflow-hidden
border-2 cursor-pointer shadow-sm;
&.active {
@apply border-blue-500;
}
&:not(.active) {
@apply border-gray-200;
}
}
/* 左侧菜单模式 - 左边深色 */
.nav-sider .dark-block {
@apply absolute left-0 top-0 w-1/4 h-full bg-gray-800 z-30;
}
.nav-sider .light-block {
@apply absolute left-0 top-0 w-full h-1/4 bg-white z-10;
}
css
四种模式的差异仅在于色块的尺寸和位置：
<el-tooltip content="左侧菜单模式">
<div class="nav-mode-item" :class="{ active: form.mode === 'sider' }">
<div class="dark-block w-1/4 h-full" />
<div class="light-block w-full h-1/4" />
</div>
</el-tooltip>
vue
el-tooltip 包裹
每个模式方块外面包裹 el-tooltip，鼠标悬停时显示模式名称：
<el-tooltip content="左侧菜单模式">
<div @click="form.mode = 'sider'">...</div>
</el-tooltip>
vue
导航模式的布局调整
导航模式的 el-form-item 需要特殊的布局处理——label 在上方，四个方块在下方水平排列：
<el-form-item label="导航模式" class="flex-col">
<div class="flex flex-1 justify-around">
<!-- 四个模式方块 -->
</div>
</el-form-item>
vue
本节小结
- Drawer 容器：使用
el-drawer的v-model控制开关，direction="rtl"从右侧打开。 - 表单组织：
el-form+el-form-item统一管理所有设置项，label-position="top"使标签在上方。 - 控件选型：颜色用 ColorPicker、布尔用 Switch、数值用 Slider。
- 导航模式：纯 CSS 色块模拟布局，
el-tooltip提供悬停说明。 - 右对齐：通过
:deep(.el-form-item__content)设置justify-content: flex-end。
↑