Vue3-Element-Admin 登录页布局切换器Login Layout Switcher概述登录页支持三种布局模式切换居左left、居中center、居右right用户选择后自动持久化到localStorage刷新页面保持上次选择。灵感来源Vben5 Admin 登录页涉及文件文件类型说明src/views/login/components/AuthLayoutSwitch.vue新增布局切换下拉组件src/views/login/index.vue修改登录页主视图集成布局切换架构设计┌─────────────────────────────────────────────────┐ │ login/index.vue │ │ │ │ authLayout useStorage(auth-layout, right)│ │ │ │ │ ▼ │ │ ┌──────────────────┐ │ │ │ AuthLayoutSwitch │◄── v-modelauthLayout │ │ │ (Dropdown 组件) │ │ │ └──────────────────┘ │ │ │ │ │ ▼ │ │ :classauth-view--${authLayout} │ │ │ │ │ ├── .auth-view--left → 表单居左 │ │ ├── .auth-view--center → 表单居中 │ │ └── .auth-view--right → 表单居右(默认) │ └─────────────────────────────────────────────────┘组件详解AuthLayoutSwitch.vue布局切换下拉组件基于 Element Plusel-dropdown实现。核心设计使用defineModelAuthLayout()实现双向绑定导出AuthLayout类型供父组件使用三种布局对应三个element-plus/icons-vue图标Postcard→ 居左Tickets→ 居中CreditCard→ 居右template el-dropdown triggerclick commandhandleCommand el-icon :size20 component :islayoutIcons[modelValue] / /el-icon template #dropdown el-dropdown-menu el-dropdown-item v-foritem in layoutOptions :keyitem.value :commanditem.value :disabledmodelValue item.value el-icon component :isitem.icon / /el-icon {{ item.label }} /el-dropdown-item /el-dropdown-menu /template /el-dropdown /template script setup langts import { Postcard, Tickets, CreditCard } from element-plus/icons-vue; export type AuthLayout left | center | right; const modelValue defineModelAuthLayout({ default: right }); const layoutIcons: RecordAuthLayout, typeof Postcard { left: Postcard, center: Tickets, right: CreditCard, }; const layoutOptions [ { label: 居左, value: left as AuthLayout, icon: Postcard }, { label: 居中, value: center as AuthLayout, icon: Tickets }, { label: 居右, value: right as AuthLayout, icon: CreditCard }, ]; function handleCommand(val: AuthLayout) { modelValue.value val; } /scriptlogin/index.vue 集成Template 关键改动!-- 根元素动态 class -- div classauth-view :classauth-view--${authLayout} !-- 工具栏中加入布局切换 -- el-tooltip content视图布局 placementbottom div classtoolbar-item AuthLayoutSwitch v-modelauthLayout / /div /el-tooltip !-- 居中模式隐藏产品介绍区域 -- section v-ifauthLayout ! center classauth-feature ... /sectionScript 关键改动import{useStorage}fromvueuse/core;importAuthLayoutSwitchfrom./components/AuthLayoutSwitch.vue;importtype{AuthLayout}from./components/AuthLayoutSwitch.vue;// localStorage 持久化key: auth-layout默认值: rightconstauthLayoutuseStorageAuthLayout(auth-layout,right);三种布局模式 CSS 实现居右默认默认 CSS Grid 布局产品介绍在左登录表单在右。.auth-view--right { .auth-panel { justify-self: end; } }居左利用 CSSdirection: rtl技巧反转 Grid 子元素顺序使登录表单出现在左侧。.auth-view--left { .auth-view__wrapper { direction: rtl; // 反转子元素排列方向 * { direction: ltr; // 子元素内部文字方向恢复正常 } } .auth-panel { justify-self: start; } }为什么用direction: rtl而不是orderorder需要给每个子元素单独设置direction: rtl一行代码反转所有子元素更简洁通过 * { direction: ltr }确保内部文本不受影响居中隐藏产品介绍区域通过v-ifwrapper 改为 flex 居中。.auth-view--center { .auth-view__wrapper { display: flex; align-items: center; justify-content: center; } .auth-panel { justify-self: center; } }持久化方案使用vueuse/core的useStorage实现 localStorage 自动读写constauthLayoutuseStorageAuthLayout(auth-layout,right);存储 keyauth-layout默认值right类型安全泛型约束为AuthLayout left | center | right自动同步值变更时自动写入 localStorage页面加载时自动读取响应式适配移动端≤768px自动隐藏产品介绍区域登录表单全宽显示media (max-width: 768px) { .auth-feature { display: none; } .auth-panel { width: 100%; } }工具栏在小屏≤640px固定在右上角media (max-width: 640px) { .auth-view__toolbar { position: fixed; top: 12px; right: 16px; z-index: 20; } }踩坑记录stylelintno-descending-specificity报错问题布局模式 CSS 块.auth-view--left .auth-panel等最初放在基础.auth-panel选择器之前导致 stylelint 报错Expected selector .auth-panel to come before selector .auth-view--left .auth-panel原因stylelint 的no-descending-specificity规则要求低特异性选择器必须出现在高特异性选择器之前。解决将布局模式块移到所有.auth-panel及其子选择器.auth-panel__brand、.auth-panel__footer等之后keyframes之前。CSS 选择器正确顺序.auth-panel ← 基础选择器先 .dark .auth-panel ← 主题变体 .auth-panel__brand ← 子选择器 .auth-panel__logo-wrap .auth-panel__logo ... .auth-panel__footer ← ↓ 布局模式块放在这里 ↓ .auth-view--left ← 包含 .auth-panel 的高特异性选择器后 .auth-view--center .auth-view--right keyframes ← 动画依赖依赖用途vueuse/coreuseStorage持久化element-plus/icons-vuePostcard/Tickets/CreditCard图标element-plusel-dropdown/el-tooltip组件
)
