仿照管理系统布局配置

1.vue仿照snowy 配置，如下图：

2.代码实现

<template><div class="theme-settings"><!-- 导航栏 --><div class="nav-bar"><el-breadcrumb separator="/"><el-breadcrumb-item>导航设置</el-breadcrumb-item><el-breadcrumb-item>导航菜单布局</el-breadcrumb-item></el-breadcrumb></div><!-- 设置区域 --><div class="settings-section"><!-- 整体风格设置 --><div class="setting-item"><span class="label">整体风格设置</span><div class="style-options"><divv-for="(style, index) in styles":key="index":class="{ 'style-block': true, selected: selectedStyle === style.value }"@click="selectStyle(style.value)"><div :class="['style-icon', style.class]"><div :class="['header-bar', style.headerClass]"></div></div></div></div></div><!-- 整体界面布局 --><div class="setting-item"><span class="label">整体界面布局</span><div class="layout-options"><divv-for="(layout, index) in layouts":key="index":class="{ 'layout-block': true, selected: selectedLayout === layout.value }"@click="selectLayout(layout.value)"><div :class="['layout-icon', layout.class]"><div :class="['header-bar', layout.headerClass]"></div></div></div></div></div><!-- 主题设置 --><h3>主题设置 <el-button type="text" size="small" @click="resetTheme">恢复默认（黑灰）</el-button></h3><!-- 主题色 --><div class="setting-item"><span class="label">主题色</span><div class="color-picker"><divv-for="(color, index) in themeColors":key="index":style="{ backgroundColor: color }":class="{ 'color-block': true, selected: selectedThemeColor === color }"@click="selectThemeColor(color)"></div></div></div><!-- 页面公用主色 --><div class="setting-item"><span class="label">页面公用主色</span><el-switch v-model="useCommonMainColor"></el-switch></div><!-- 页面公用背景色 --><div class="setting-item"><span class="label">页面公用背景色</span><el-switch v-model="useCommonBgColor"></el-switch></div><!-- 侧边栏 --><div class="setting-item"><span class="label">侧边栏</span><el-switch v-model="showSidebar"></el-switch></div><!-- 侧边栏展开 --><div class="setting-item"><span class="label">侧边栏展开</span><el-switch v-model="expandSidebar"></el-switch></div><!-- 变更模块展开方式 --><div class="setting-item"><span class="label">变更模块展开方式</span><el-switch v-model="changeModuleExpand"></el-switch></div><!-- 变更用户小卡片 --><div class="setting-item"><span class="label">变更用户小卡片</span><el-switch v-model="changeUserCard"></el-switch></div><!-- 页面权限角色 --><div class="setting-item"><span class="label">页面权限角色</span><el-switch v-model="enablePageRole"></el-switch></div><!-- 页面权限 --><div class="setting-item"><span class="label">页面权限</span><el-switch v-model="enablePagePermission"></el-switch></div><!-- 提示信息 --><div class="tip"><el-alerttitle="提示：切换主题需重新登录，开发需先在 config/index.js 中配置默认值，否则不会生效"type="warning":closable="false"></el-alert></div><!-- 操作按钮 --><div class="actions"><el-button type="primary" @click="saveSettings">提交</el-button><el-button @click="resetSettings">重置</el-button></div></div></div>
</template><script>
export default {data() {return {// 整体风格设置选项styles: [{ value: "style1", class: "style1", headerClass: "header-dark" },{ value: "style2", class: "style2", headerClass: "header-light" },{ value: "style3", class: "style3", headerClass: "header-dark" },],selectedStyle: "style3", // 默认选中第三个// 整体界面布局选项layouts: [{ value: "layout1", class: "layout1", headerClass: "header-dark" },{ value: "layout2", class: "layout2", headerClass: "header-dark" },{ value: "layout3", class: "layout3", headerClass: "header-dark" },],selectedLayout: "layout1", // 默认选中第一个// 主题色themeColors: ["#FF0000", // 红"#FF69B4", // 粉"#00CED1", // 青"#00FF00", // 绿"#0000FF", // 蓝"#800080", // 紫"#000000", // 黑],selectedThemeColor: "#000000", // 默认黑色useCommonMainColor: false,useCommonBgColor: false,showSidebar: true,expandSidebar: false,changeModuleExpand: true,changeUserCard: false,enablePageRole: false,enablePagePermission: false,};},methods: {selectStyle(style) {this.selectedStyle = style;this.$message.success(`已选择风格：${style}`);},selectLayout(layout) {this.selectedLayout = layout;this.$message.success(`已选择布局：${layout}`);},selectThemeColor(color) {this.selectedThemeColor = color;this.$message.success(`已选择主题色：${color}`);},resetTheme() {this.selectedThemeColor = "#000000";this.$message.success("已恢复默认主题（黑灰）");},saveSettings() {const settings = {style: this.selectedStyle,layout: this.selectedLayout,themeColor: this.selectedThemeColor,useCommonMainColor: this.useCommonMainColor,useCommonBgColor: this.useCommonBgColor,showSidebar: this.showSidebar,expandSidebar: this.expandSidebar,changeModuleExpand: this.changeModuleExpand,changeUserCard: this.changeUserCard,enablePageRole: this.enablePageRole,enablePagePermission: this.enablePagePermission,};console.log("保存设置:", settings);this.$message.success("设置已保存，请重新登录以生效");},resetSettings() {this.selectedStyle = "style3";this.selectedLayout = "layout1";this.selectedThemeColor = "#000000";this.useCommonMainColor = false;this.useCommonBgColor = false;this.showSidebar = true;this.expandSidebar = false;this.changeModuleExpand = true;this.changeUserCard = false;this.enablePageRole = false;this.enablePagePermission = false;this.$message.success("已重置所有设置");},},
};
</script><style lang="less" scoped>
.theme-settings {padding: 20px;.nav-bar {margin-bottom: 20px;}.settings-section {background: #fff;padding: 20px;border-radius: 4px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);h3 {margin-bottom: 20px;font-size: 18px;display: flex;justify-content: space-between;align-items: center;}.setting-item {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;.label {font-size: 14px;color: #333;}.style-options,.layout-options {display: flex;gap: 10px;.style-block,.layout-block {width: 60px;height: 40px;border-radius: 4px;border: 2px solid transparent;cursor: pointer;position: relative;transition: border 0.3s;&.selected {border: 2px solid #409eff;&:after {content: "\2713"; /* 勾号 */position: absolute;top: 2px;right: 2px;color: #409eff;font-size: 16px;font-weight: bold;}}.style-icon,.layout-icon {width: 100%;height: 100%;border-radius: 2px;position: relative;overflow: hidden;}/* 头部颜色条 */.header-bar {position: absolute;top: 0;left: 0;width: 100%;height: 8px; /* 头部高度 */}.header-dark {background-color: #2c3e50; /* 深色头部 */}.header-light {background-color: #ecf0f1; /* 浅色头部 */}/* 整体风格设置图标样式 */.style1 {background: linear-gradient(to right, #2c3e50 20%, #ecf0f1 20%);}.style2 {background: linear-gradient(to right, #ecf0f1 20%, #ecf0f1 20%);}.style3 {background: linear-gradient(to right, #2c3e50 20%, #2c3e50 20%);}/* 整体界面布局图标样式 */.layout1 {background: linear-gradient(to right, #2c3e50 20%, #ecf0f1 20%);}.layout2 {background: linear-gradient(to right, #2c3e50 20%, #ecf0f1 20%);}.layout3 {background: linear-gradient(to right, #2c3e50 20%, #2c3e50 20%);}}}.color-picker {display: flex;gap: 10px;.color-block {width: 30px;height: 30px;border-radius: 4px;cursor: pointer;border: 2px solid transparent;transition: border 0.3s;&.selected {border: 2px solid #409eff;}}}}.tip {margin-bottom: 20px;}.actions {text-align: right;.el-button {margin-left: 10px;}}}
}
</style>