improve; 主题添加

template/admin/src/i18n/lang/en.js

@@ -133,6 +133,7 @@ export default {
 		fourWartermarkText: 'Watermark copy',
 		fiveTitle: 'Other settings',
 		fiveTagsStyle: 'Tagsview style',
+		themeStyle: 'Theme',
 		fiveAnimation: 'page animation',
 		fiveColumnsAsideStyle: 'Column style',
 		fiveColumnsAsideLayout: 'Column layout',

template/admin/src/i18n/lang/zh-cn.js

@@ -121,18 +121,19 @@ export default {
 		threeLockScreenTime: '自动锁屏(s/秒)',
 		fourTitle: '界面显示',
 		fourIsShowLogo: '侧边栏 Logo',
-		fourIsBreadcrumb: '开启 面包屑',
-		fourIsBreadcrumbIcon: '开启 面包屑图标',
-		fourIsTagsview: '开启 历史菜单',
-		fourIsTagsviewIcon: '开启 历史菜单 图标',
-		fourIsFooter: '开启 Footer',
+		fourIsBreadcrumb: '面包屑',
+		fourIsBreadcrumbIcon: '面包屑图标',
+		fourIsTagsview: '历史菜单',
+		fourIsTagsviewIcon: '历史菜单 图标',
+		fourIsFooter: 'Footer',
 		fourIsGrayscale: '灰色模式',
 		fourIsInvert: '色弱模式',
 		fourIsDark: '深色模式',
 		fourIsWartermark: '开启水印',
 		fourWartermarkText: '水印文案',
 		fiveTitle: '其它设置',
-		fiveTagsStyle: 'Tagsview 风格',
+		fiveTagsStyle: '标签风格',
+		themeStyle: '主题',
 		fiveAnimation: '主页面切换动画',
 		fiveColumnsAsideStyle: '分栏高亮风格',
 		fiveColumnsAsideLayout: '分栏布局风格',

template/admin/src/i18n/lang/zh-tw.js

@@ -133,6 +133,7 @@ export default {
 		fourWartermarkText: '浮水印文案',
 		fiveTitle: '其它設定',
 		fiveTagsStyle: 'Tagsview 風格',
+		themeStyle: '主題',
 		fiveAnimation: '主頁面切換動畫',
 		fiveColumnsAsideStyle: '分欄高亮風格',
 		fiveColumnsAsideLayout: '分欄佈局風格',

template/admin/src/layout/component/aside.vue

@@ -1,6 +1,7 @@
 <template>
   <el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
-    <Logo v-if="setShowLogo && menuList.length" />
+    <!-- <Logo v-if="setShowLogo && menuList.length" /> -->
+    <el-divider v-if="menuList.length && !getThemeConfig.isCollapse" content-position="center">{{ catName }}</el-divider>
     <el-scrollbar class="flex-auto" ref="layoutAsideRef">
       <Vertical :menuList="menuList" :class="setCollapseWidth" />
     </el-scrollbar>
@@ -25,6 +26,7 @@ export default {
     return {
       menuList: [],
       clientWidth: '',
+      catName: '',
     };
   },
   computed: {
@@ -73,6 +75,9 @@ export default {
     this.bus.$on('layoutMobileResize', (res) => {
       this.initMenuFixed(res.clientWidth);
     });
+    this.bus.$on('oneCatName', (name) => {
+      this.catName = name;
+    });
     // 菜单滚动条监听
     this.bus.$on('updateElScrollBar', () => {
       setTimeout(() => {

template/admin/src/layout/component/columnsAside.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="layout-columns-aside">
     <el-scrollbar>
+      <Logo />
       <ul>
         <li
           v-for="(v, k) in columnsAsideList"
@@ -41,9 +42,11 @@
 
 <script>
 import { getMenuSider, getHeaderName } from '@/libs/system';
+import Logo from '@/layout/logo/index.vue';
 
 export default {
   name: 'layoutColumnsAside',
+  components: { Logo },
   data() {
     return {
       columnsAsideList: [],
@@ -108,6 +111,7 @@ export default {
         this.$store.state.themeConfig.themeConfig.isCollapse = true;
         return false;
       }
+      this.bus.$emit('oneCatName', resData.item[0].title);
       this.onColumnsAsideDown(resData.item[0].k);
       // 刷新时，初始化一个路由设置自动收起菜单
       resData.children.length > 0
@@ -181,6 +185,7 @@ export default {
         const resData = this.setSendChildren(HeadName);
         if (resData.length <= 0) return false;
         this.onColumnsAsideDown(resData.item[0].k);
+        this.bus.$emit('oneCatName', resData.item[0].title);
         this.bus.$emit('setSendColumnsChildren', asideList || []);
       },
       deep: true,
@@ -235,12 +240,12 @@ export default {
     }
     .layout-columns-active,
     .layout-columns-active a {
-      color: var(--prev-color-text-white);
+      color: var(--prev-bg-columnsMenuActiveColor);
       transition: 0.3s ease-in-out;
     }
     .columns-round {
       background: var(--prev-color-primary);
-      color: var(--prev-color-text-white);
+      // color: var(--prev-color-text-white);
       position: absolute;
       left: 50%;
       top: 2px;

template/admin/src/layout/logo/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="layout-logo" v-if="!$store.state.themeConfig.themeConfig.isCollapse" @click="onThemeConfigChange">
+  <div
+    class="layout-logo"
+    v-if="$store.state.themeConfig.themeConfig.layout !== 'columns' && !$store.state.themeConfig.themeConfig.isCollapse"
+    @click="onThemeConfigChange"
+  >
     <img v-if="maxLogo" class="layout-logo-medium-img" :src="maxLogo" />
   </div>
   <div class="layout-logo-size" v-else @click="onThemeConfigChange">
@@ -55,7 +59,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-//   box-shadow: 0px 1px 4px rgba(0, 21, 41, 2%);
+  //   box-shadow: 0px 1px 4px rgba(0, 21, 41, 2%);
   color: var(--prev-color-primary);
   font-size: 16px;
   cursor: pointer;

template/admin/src/layout/navBars/breadcrumb/setings.vue

@@ -1,16 +1,102 @@
 <template>
   <div class="layout-breadcrumb-seting">
     <el-drawer
-      :title="$t('message.layout.configTitle')"
       :visible.sync="getThemeConfig.isDrawer"
       direction="rtl"
       destroy-on-close
-      size="240px"
+      size="300px"
       @close="onDrawerClose"
     >
       <el-scrollbar class="layout-breadcrumb-seting-bar">
+        <!-- 布局切换 -->
+        <el-divider :content-position="contentPosotion">{{ $t('message.layout.sixTitle') }}</el-divider>
+        <div class="layout-drawer-content-flex">
+          <!-- defaults 布局 -->
+          <div
+            class="layout-drawer-content-item"
+            :class="{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }"
+            @click="onSetLayout('defaults')"
+          >
+            <section class="el-container el-circular">
+              <aside class="el-aside w10 mr5"></aside>
+              <section class="el-container is-vertical">
+                <header class="el-header mb5" style="height: 10px"></header>
+                <main class="el-main"></main>
+              </section>
+            </section>
+            <!-- <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">{{ $t('message.layout.sixDefaults') }}</p>
+              </div>
+            </div> -->
+          </div>
+          <!-- classic 布局 -->
+          <div
+            class="layout-drawer-content-item"
+            :class="{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }"
+            @click="onSetLayout('classic')"
+          >
+            <section class="el-container is-vertical el-circular">
+              <header class="el-header mb5" style="height: 10px"></header>
+              <section class="el-container">
+                <aside class="el-aside mr5" style="width: 20px"></aside>
+                <section class="el-container is-vertical">
+                  <main class="el-main"></main>
+                </section>
+              </section>
+            </section>
+            <!-- <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">{{ $t('message.layout.sixClassic') }}</p>
+              </div>
+            </div> -->
+          </div>
+          <!-- transverse 布局 -->
+          <div
+            class="layout-drawer-content-item"
+            :class="{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }"
+            @click="onSetLayout('transverse')"
+          >
+            <section class="el-container is-vertical el-circular">
+              <header class="el-header mb5" style="height: 10px"></header>
+              <section class="el-container">
+                <section class="el-container is-vertical">
+                  <main class="el-main"></main>
+                </section>
+              </section>
+            </section>
+            <!-- <div
+              class="layout-tips-warp"
+              :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }"
+            >
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">{{ $t('message.layout.sixTransverse') }}</p>
+              </div>
+            </div> -->
+          </div>
+          <!-- columns 布局 -->
+          <div
+            class="layout-drawer-content-item"
+            :class="{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }"
+            @click="onSetLayout('columns')"
+          >
+            <section class="el-container el-circular">
+              <aside class="el-aside-dark mr5" style="width: 10px"></aside>
+              <aside class="el-aside mr5" style="width: 17px"></aside>
+              <section class="el-container is-vertical">
+                <!-- <header class="el-header" style="height: 10px"></header> -->
+                <main class="el-main"></main>
+              </section>
+            </section>
+            <!-- <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">{{ $t('message.layout.sixColumns') }}</p>
+              </div>
+            </div> -->
+          </div>
+        </div>
         <!-- 全局主题 -->
-        <el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
+        <!-- <el-divider :content-position="contentPosotion">{{ $t('message.layout.oneTitle') }}</el-divider>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -30,10 +116,32 @@
           <div class="layout-breadcrumb-seting-bar-flex-value">
             <el-switch v-model="getThemeConfig.isIsDark" :width="35" @change="onAddDarkChange"></el-switch>
           </div>
-        </div>
+        </div> -->
 
         <!-- 界面设置 -->
-        <el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
+        <el-divider :content-position="contentPosotion">{{ $t('message.layout.threeTitle') }}</el-divider>
+        <div class="layout-breadcrumb-seting-bar-flex mb10">
+          <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.themeStyle') }}</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-select
+              v-model="getThemeConfig.themeStyle"
+              placeholder="请选择"
+              size="mini"
+              style="width: 90px"
+              @change="setLocalTheme"
+            >
+              <el-option label="蓝黑" value="theme-1"></el-option>
+              <el-option label="蓝白" value="theme-2"></el-option>
+              <el-option label="绿黑" value="theme-3"></el-option>
+              <el-option label="绿白" value="theme-4"></el-option>
+              <el-option label="紫黑" value="theme-5"></el-option>
+              <el-option label="紫白" value="theme-6"></el-option>
+              <el-option label="红黑" value="theme-7"></el-option>
+              <el-option label="红白" value="theme-8"></el-option>
+              <el-option label="渐变" value="theme-9"></el-option>
+            </el-select>
+          </div>
+        </div>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -54,7 +162,7 @@
         </div>
 
         <!-- 界面显示 -->
-        <el-divider content-position="left">{{ $t('message.layout.fourTitle') }}</el-divider>
+        <el-divider :content-position="contentPosotion">{{ $t('message.layout.fourTitle') }}</el-divider>
         <div class="layout-breadcrumb-seting-bar-flex">
           <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShowLogo') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -123,7 +231,7 @@
         </div>
 
         <!-- 其它设置 -->
-        <el-divider content-position="left">{{ $t('message.layout.fiveTitle') }}</el-divider>
+        <el-divider :content-position="contentPosotion">{{ $t('message.layout.fiveTitle') }}</el-divider>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -186,91 +294,7 @@
             </el-select>
           </div>
         </div>
-
-        <!-- 布局切换 -->
-        <el-divider content-position="left">{{ $t('message.layout.sixTitle') }}</el-divider>
-        <div class="layout-drawer-content-flex">
-          <!-- defaults 布局 -->
-          <div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
-            <section
-              class="el-container el-circular"
-              :class="{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }"
-            >
-              <aside class="el-aside" style="width: 20px"></aside>
-              <section class="el-container is-vertical">
-                <header class="el-header" style="height: 10px"></header>
-                <main class="el-main"></main>
-              </section>
-            </section>
-            <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
-              <div class="layout-tips-box">
-                <p class="layout-tips-txt">{{ $t('message.layout.sixDefaults') }}</p>
-              </div>
-            </div>
-          </div>
-          <!-- classic 布局 -->
-          <div class="layout-drawer-content-item" @click="onSetLayout('classic')">
-            <section
-              class="el-container is-vertical el-circular"
-              :class="{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }"
-            >
-              <header class="el-header" style="height: 10px"></header>
-              <section class="el-container">
-                <aside class="el-aside" style="width: 20px"></aside>
-                <section class="el-container is-vertical">
-                  <main class="el-main"></main>
-                </section>
-              </section>
-            </section>
-            <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
-              <div class="layout-tips-box">
-                <p class="layout-tips-txt">{{ $t('message.layout.sixClassic') }}</p>
-              </div>
-            </div>
-          </div>
-          <!-- transverse 布局 -->
-          <div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
-            <section
-              class="el-container is-vertical el-circular"
-              :class="{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }"
-            >
-              <header class="el-header" style="height: 10px"></header>
-              <section class="el-container">
-                <section class="el-container is-vertical">
-                  <main class="el-main"></main>
-                </section>
-              </section>
-            </section>
-            <div
-              class="layout-tips-warp"
-              :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }"
-            >
-              <div class="layout-tips-box">
-                <p class="layout-tips-txt">{{ $t('message.layout.sixTransverse') }}</p>
-              </div>
-            </div>
-          </div>
-          <!-- columns 布局 -->
-          <div class="layout-drawer-content-item" @click="onSetLayout('columns')">
-            <section
-              class="el-container el-circular"
-              :class="{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }"
-            >
-              <aside class="el-aside-dark" style="width: 10px"></aside>
-              <aside class="el-aside" style="width: 20px"></aside>
-              <section class="el-container is-vertical">
-                <header class="el-header" style="height: 10px"></header>
-                <main class="el-main"></main>
-              </section>
-            </section>
-            <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
-              <div class="layout-tips-box">
-                <p class="layout-tips-txt">{{ $t('message.layout.sixColumns') }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="copy-config">
+        <!-- <div class="copy-config">
           <el-alert :title="$t('message.layout.tipText')" type="warning" :closable="false"> </el-alert>
           <el-button
             size="small"
@@ -290,7 +314,7 @@
           >
             {{ $t('message.layout.resetText') }}
           </el-button>
-        </div>
+        </div> -->
       </el-scrollbar>
     </el-drawer>
   </div>
@@ -301,6 +325,7 @@ import ClipboardJS from 'clipboard';
 import { Local } from '@/utils/storage.js';
 import { useChangeColor } from '@/utils/theme.js';
 import config from '../../../../package.json';
+import { themeList } from './theme';
 export default {
   name: 'layoutBreadcrumbSeting',
   computed: {
@@ -309,6 +334,11 @@ export default {
       return this.$store.state.themeConfig.themeConfig;
     },
   },
+  data() {
+    return {
+      contentPosotion: 'center',
+    };
+  },
   created() {
     // 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
     if (!Local.get('frequency')) this.initSetLayoutChange();
@@ -321,6 +351,7 @@ export default {
       this.$store.state.themeConfig.themeConfig.isCollapse = false;
       this.initSetLayoutChange();
     });
+    this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);
   },
   mounted() {
     this.initLayoutConfig();
@@ -330,7 +361,7 @@ export default {
     onColorPickerChange() {
       if (!this.getThemeConfig.primary) return;
       // 颜色加深
-      document.documentElement.style.setProperty('--prev-color-primary', this.getThemeConfig.primary);
+      // document.documentElement.style.setProperty('--prev-color-primary', this.getThemeConfig.primary);
       // 颜色变浅
       for (let i = 1; i <= 9; i++) {
         document.documentElement.style.setProperty(
@@ -340,6 +371,46 @@ export default {
       }
       this.setLocalThemeConfig();
     },
+    setLocalTheme(val) {
+      let themeSelect = themeList[val];
+
+      if (['theme-1', 'theme-3', 'theme-5', 'theme-7'].includes(val)) {
+        // 这几个为黑色背景主题
+        if (['classic', 'transverse'].includes(this.getThemeConfig.layout)) {
+          themeSelect['--prev-bg-topBar'] = '#282c34';
+          themeSelect['--prev-bg-topBarColor'] = '#fff';
+        } else if (this.getThemeConfig.layout === 'columns') {
+          themeSelect['--prev-bg-topBar'] = '#fff';
+          themeSelect['--prev-bg-topBarColor'] = '#515a6e';
+          themeSelect['--prev-bg-menuBar'] = '#fff';
+          themeSelect['--prev-bg-menuBarColor'] = '#303133';
+          if (val == 'theme-1') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#e8f4ff';
+            themeSelect['--prev-color-primary'] = '#1890ff';
+          } else if (val == 'theme-3') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#ecf8f3';
+            themeSelect['--prev-color-primary'] = '#41b584';
+          } else if (val == 'theme-5') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#f0eefe';
+            themeSelect['--prev-color-primary'] = '#6954f0';
+          } else if (val == 'theme-7') {
+            themeSelect['--prev-bg-menu-hover-ba-color'] = '#feedeb';
+            themeSelect['--prev-color-primary'] = '#f34d37';
+          }
+        }
+      } else {
+        if (this.getThemeConfig.layout === 'columns') {
+          if (val == 'theme-4') {
+            // themeSelect['--prev-bg-menu-hover-ba-color'] = '#ecf8f3';
+            // themeSelect['--prev-color-primary'] = '#41b584';
+          }
+        }
+      }
+      for (let key in themeSelect) {
+        console.log(key, themeSelect[key]);
+        document.documentElement.style.setProperty(key, themeSelect[key]);
+      }
+    },
     onMenuBgColorChange() {
       if (!this.getThemeConfig.menuBgColor) return;
       // 颜色加深
@@ -411,33 +482,35 @@ export default {
       if (this.$store.state.themeConfig.themeConfig.layout === layout) return false;
       this.$store.state.themeConfig.themeConfig.layout = layout;
       this.$store.state.themeConfig.themeConfig.isDrawer = false;
-      this.initSetLayoutChange();
+      // this.initSetLayoutChange();
+      this.setLocalTheme(this.$store.state.themeConfig.themeConfig.themeStyle);
     },
     // 设置布局切换，重置主题样式
     initSetLayoutChange() {
       console.log(this.$store.state.themeConfig.themeConfig.layout);
-      if (this.$store.state.themeConfig.themeConfig.layout === 'classic') {
-        this.onBgColorPickerChange('menuBar', '#282c34');
-        this.onBgColorPickerChange('menuBarColor', '#ffffff');
-        this.onBgColorPickerChange('topBar', '#282c34');
-        this.onBgColorPickerChange('topBarColor', '#ffffff');
-      } else if (this.$store.state.themeConfig.themeConfig.layout === 'transverse') {
-        this.onBgColorPickerChange('menuBarColor', '#ffffff');
-        this.onBgColorPickerChange('topBar', '#282c34');
-        this.onBgColorPickerChange('topBarColor', '#fff');
-        // this.onBgColorPickerChange('bgTopBarColor', '#ccc');
-      } else if (this.$store.state.themeConfig.themeConfig.layout === 'columns') {
-        this.onBgColorPickerChange('menuBar', '#282c34');
-        this.onBgColorPickerChange('menuBarColor', '#fff');
-        this.onBgColorPickerChange('topBar', '#ffffff');
-        this.onBgColorPickerChange('topBarColor', '#606266');
-        this.onBgColorPickerChange('columnsMenuBar', '#282c34');
-      } else {
-        this.onBgColorPickerChange('menuBar', '#282c34');
-        this.onBgColorPickerChange('menuBarColor', '#ffffff');
-        this.onBgColorPickerChange('topBar', '#ffffff');
-        this.onBgColorPickerChange('topBarColor', '#606266');
-      }
+
+      // if (this.$store.state.themeConfig.themeConfig.layout === 'classic') {
+      //   this.onBgColorPickerChange('menuBar', '#282c34');
+      //   this.onBgColorPickerChange('menuBarColor', '#ffffff');
+      //   this.onBgColorPickerChange('topBar', '#282c34');
+      //   this.onBgColorPickerChange('topBarColor', '#ffffff');
+      // } else if (this.$store.state.themeConfig.themeConfig.layout === 'transverse') {
+      //   this.onBgColorPickerChange('menuBarColor', '#ffffff');
+      //   this.onBgColorPickerChange('topBar', '#282c34');
+      //   this.onBgColorPickerChange('topBarColor', '#fff');
+      //   // this.onBgColorPickerChange('bgTopBarColor', '#ccc');
+      // } else if (this.$store.state.themeConfig.themeConfig.layout === 'columns') {
+      //   this.onBgColorPickerChange('menuBar', '#282c34');
+      //   this.onBgColorPickerChange('menuBarColor', '#fff');
+      //   this.onBgColorPickerChange('topBar', '#ffffff');
+      //   this.onBgColorPickerChange('topBarColor', '#606266');
+      //   this.onBgColorPickerChange('columnsMenuBar', '#282c34');
+      // } else {
+      //   this.onBgColorPickerChange('menuBar', '#282c34');
+      //   this.onBgColorPickerChange('menuBarColor', '#ffffff');
+      //   this.onBgColorPickerChange('topBar', '#ffffff');
+      //   this.onBgColorPickerChange('topBarColor', '#606266');
+      // }
     },
     // 菜单 / 顶栏背景等
     onBgColorPickerChange(bg, rgb) {
@@ -470,6 +543,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.w10 {
+  width: 10px;
+}
+.mr5 {
+  margin-right: 5px;
+}
 .layout-breadcrumb-seting-bar {
   height: calc(100vh - 50px);
   padding: 0 15px;
@@ -488,27 +567,49 @@ export default {
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
-    align-content: flex-start;
+    align-content: center;
+    justify-content: center;
     margin: 0 -5px;
+    .layout-drawer-content-item.drawer-layout-active {
+      border: 1px solid;
+      border-color: #2d8cf0;
+    }
+    .layout-drawer-content-item:hover {
+      transition: all 0.3s ease-in-out;
+      border: 1px solid;
+      border-color: #2d8cf0;
+    }
     .layout-drawer-content-item {
-      width: 50%;
+      width: 107px;
       height: 70px;
       cursor: pointer;
-      border: 1px solid transparent;
+      border: 1px solid rgba(0, 0, 0, 0);
       position: relative;
-      padding: 5px;
+      padding: 6px;
+      background: #ffffff;
+      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 6px;
+      opacity: 1;
+      margin: 10px;
+
       .el-container {
         height: 100%;
         .el-aside-dark {
           background-color: var(--prev-color-seting-header);
+          border-radius: 2px;
         }
         .el-aside {
-          background-color: var(--prev-color-seting-aside);
+          background-color: var(--prev-color-primary);
+          border-radius: 2px;
         }
         .el-header {
+          border-radius: 2px;
           background-color: var(--prev-color-seting-header);
         }
         .el-main {
+          border-radius: 2px;
+          border: 1px dashed #2d8cf0;
+          padding: 0;
           background-color: var(--prev-color-seting-main);
         }
       }
@@ -518,10 +619,7 @@ export default {
         border: 1px solid transparent;
         transition: all 0.3s ease-in-out;
       }
-      .drawer-layout-active {
-        border: 1px solid;
-        border-color: var(--prev-color-primary);
-      }
+
       .layout-tips-warp,
       .layout-tips-warp-active {
         transition: all 0.3s ease-in-out;
@@ -573,11 +671,6 @@ export default {
         }
       }
       &:hover {
-        .el-circular {
-          transition: all 0.3s ease-in-out;
-          border: 1px solid;
-          border-color: var(--prev-color-primary);
-        }
         .layout-tips-warp {
           transition: all 0.3s ease-in-out;
           border-color: var(--prev-color-primary);

template/admin/src/layout/navBars/breadcrumb/theme.js

@@ -0,0 +1,125 @@
+export const themeList = {
+  'theme-1': {
+    '--prev-bg-menuBar': '#282c34',
+    '--prev-bg-menuBarColor': '#fff',
+    '--prev-color-primary': '#fff',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#1890ff',
+    '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
+    '--prev-bg-topBarColor': '#282c34',
+    '--prev-bg-columnsMenuBar': '#282c34',
+    '--prev-bg-columnsMenuBarColor': '#fff',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-tag-active-color': '#1890ff',
+    '--prev-color-primary-light-9': '#e8f4ff',
+  },
+  'theme-2': {
+    '--prev-bg-menuBar': '#ffffff',
+    '--prev-bg-menuBarColor': '#515a6e',
+    '--prev-color-primary': '#1890ff',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#e8f4ff',
+    '--prev-bg-topBar': '#ffffff',
+    '--prev-bg-topBarColor': '#515a6e',
+    '--prev-bg-columnsMenuBar': '#fff',
+    '--prev-bg-columnsMenuBarColor': '#515a6e',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-tag-active-color': '#1890ff',
+    '--prev-color-primary-light-9': '#e8f4ff',
+  },
+  'theme-3': {
+    '--prev-bg-menuBar': '#282c34',
+    '--prev-bg-menuBarColor': '#fff',
+    '--prev-color-primary': '#fff',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#41b584', // 菜单选中背景色
+    '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
+    '--prev-bg-topBarColor': '#282c34',
+    '--prev-bg-columnsMenuBar': '#282c34',
+    '--prev-bg-columnsMenuBarColor': '#fff',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-color-primary-light-9': '#ecf8f3',
+    '--prev-tag-active-color': '#41b584',
+    '--prev-color-primary-light-9': '#ecf8f3',
+  },
+  'theme-4': {
+    '--prev-bg-menuBar': '#ffffff',
+    '--prev-bg-menuBarColor': '#515a6e',
+    '--prev-color-primary': '#41b584',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#ecf8f3',
+    '--prev-bg-topBar': '#ffffff',
+    '--prev-bg-topBarColor': '#515a6e',
+    '--prev-bg-columnsMenuBar': '#fff',
+    '--prev-bg-columnsMenuBarColor': '#515a6e',
+    '--prev-bg-columnsMenuActiveColor': '#ecf8f3',
+    '--prev-tag-active-color': '#41b584',
+    '--prev-color-primary-light-9': '#ecf8f3',
+  },
+  'theme-5': {
+    '--prev-bg-menuBar': '#282c34',
+    '--prev-bg-menuBarColor': '#fff',
+    '--prev-color-primary': '#fff',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#6954f0', // 菜单选中背景色
+    '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
+    '--prev-bg-topBarColor': '#282c34',
+    '--prev-bg-columnsMenuBar': '#282c34',
+    '--prev-bg-columnsMenuBarColor': '#fff',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-color-primary-light-9': '#f0eefe',
+    '--prev-tag-active-color': '#6954f0',
+  },
+  'theme-6': {
+    '--prev-bg-menuBar': '#ffffff',
+    '--prev-bg-menuBarColor': '#515a6e',
+    '--prev-color-primary': '#6954f0',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#e8f4ff',
+    '--prev-bg-topBar': '#ffffff',
+    '--prev-bg-topBarColor': '#515a6e',
+    '--prev-bg-columnsMenuBar': '#fff',
+    '--prev-bg-columnsMenuBarColor': '#515a6e',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-color-primary-light-9': '#f0eefe',
+  },
+  'theme-7': {
+    '--prev-bg-menuBar': '#282c34',
+    '--prev-bg-menuBarColor': '#fff',
+    '--prev-color-primary': '#fff',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#f34d37', // 菜单选中背景色
+    '--prev-bg-topBar': '#fff', //顶部菜单栏颜色
+    '--prev-bg-topBarColor': '#282c34',
+    '--prev-bg-columnsMenuBar': '#282c34',
+    '--prev-bg-columnsMenuBarColor': '#fff',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+  },
+  'theme-8': {
+    '--prev-bg-menuBar': '#ffffff',
+    '--prev-bg-menuBarColor': '#515a6e',
+    '--prev-color-primary': '#f34d37',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#feedeb',
+    '--prev-bg-topBar': '#ffffff',
+    '--prev-bg-topBarColor': '#515a6e',
+    '--prev-bg-columnsMenuBar': '#fff',
+    '--prev-bg-columnsMenuBarColor': '#515a6e',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-color-primary-light-9': '#feedeb',
+  },
+  'theme-9': {
+    '--prev-bg-menuBar': '#ffffff',
+    '--prev-bg-menuBarColor': '#515a6e',
+    '--prev-color-primary': '#1890ff',
+    '--prev-color-text-white': '#515a6e',
+    '--prev-bg-menu-hover-ba-color': '#e8f4ff',
+    '--prev-bg-topBar': '#ffffff',
+    '--prev-bg-topBarColor': '#515a6e',
+    '--prev-bg-columnsMenuBar': 'linear-gradient(90deg,#006cff,#399efd)',
+    '--prev-bg-columnsMenuBarColor': '#fff',
+    '--prev-bg-columnsMenuActiveColor': '#fff',
+    '--prev-tag-active-color': '#1890ff',
+    '--prev-color-primary-light-9': '#e8f4ff',
+  },
+};

template/admin/src/layout/navBars/tagsView/tagsView.vue

@@ -371,7 +371,7 @@ export default {
         transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
       }
       &:hover {
-        color: var(--prev-color-text-white);
+        color: var(--prev-color-primary-light-9);
         transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
         border-color: transparent;
         &::before {
@@ -380,7 +380,8 @@ export default {
           border-radius: 2px;
         }
         .is-tagsview-icon {
-          color: var(--prev-color-text-white);
+          color: var(--prev-color-primary-light-9);
+
           transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
         }
       }
@@ -388,7 +389,7 @@ export default {
         position: relative;
         left: -5px;
         top: 1px;
-        color: var(--prev-color-text-white);
+        color: var(--prev-color-primary-light-9);
       }
       &-icon {
         border-radius: 100%;
@@ -405,7 +406,7 @@ export default {
       }
     }
     .is-active {
-      color: var(--prev-color-text-white);
+      color: var(--prev-color-primary-light-9);
       transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1);
       border-color: transparent;
       &::before {
@@ -444,7 +445,7 @@ export default {
     }
     .is-active {
       background: none !important;
-      color: #fff !important;
+      color: var(--prev-bg-menu-hover-ba-color) !important;
     }
   }
   // 风格5
@@ -481,7 +482,7 @@ export default {
     .is-active {
       @extend .tags-style-five-svg;
       background: var(--prev-color-primary-light-9) !important;
-      color: var(--prev-color-primary) !important;
+      color: var(--prev-tag-active-color) !important;
       z-index: 1;
     }
   }

template/admin/src/store/module/themeConfig.js

@@ -3,121 +3,121 @@
  * 修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效
  */
 const themeConfigModule = {
-	namespaced: true,
-	state: {
-		themeConfig: {
-			// 是否开启布局配置抽屉
-			isDrawer: false,
+  namespaced: true,
+  state: {
+    themeConfig: {
+      // 是否开启布局配置抽屉
+      isDrawer: false,
 
-			/**
-			 * 全局主题
-			 */
-			// 默认 primary 主题颜色
-			primary: '#409eff',
-			// 菜单背景色
-			menuBgColor: '#282c34',
-			// 是否开启深色模式
-			isIsDark: false,
+      /**
+       * 全局主题
+       */
+      // 默认 primary 主题颜色
+      primary: '#409eff',
+      // 菜单背景色
+      menuBgColor: '#282c34',
+      // 是否开启深色模式
+      isIsDark: false,
+      themeStyle: 'theme-1',
+      /**
+       * 菜单 / 顶栏
+       * 请注意：
+       * 需要同时修改 `/@/theme/common/var.scss` 对应的值，
+       */
+      // 默认顶栏导航背景颜色
+      topBar: '#ffffff',
+      // 默认顶栏导航字体颜色
+      topBarColor: '#606266',
+      // 默认菜单导航背景颜色
+      menuBar: '#282c34',
+      // 默认菜单导航字体颜色
+      menuBarColor: '#eaeaea',
+      // 默认分栏菜单背景颜色
+      columnsMenuBar: '#282c34',
+      // 默认分栏菜单字体颜色
+      columnsMenuBarColor: '#e6e6e6',
 
-			/**
-			 * 菜单 / 顶栏
-			 * 请注意：
-			 * 需要同时修改 `/@/theme/common/var.scss` 对应的值，
-			 */
-			// 默认顶栏导航背景颜色
-			topBar: '#ffffff',
-			// 默认顶栏导航字体颜色
-			topBarColor: '#606266',
-			// 默认菜单导航背景颜色
-			menuBar: '#282c34',
-			// 默认菜单导航字体颜色
-			menuBarColor: '#eaeaea',
-			// 默认分栏菜单背景颜色
-			columnsMenuBar: '#282c34',
-			// 默认分栏菜单字体颜色
-			columnsMenuBarColor: '#e6e6e6',
+      /**
+       * 界面设置
+       */
+      // 是否开启菜单水平折叠效果
+      isCollapse: false,
+      // 是否开启菜单手风琴效果
+      isUniqueOpened: false,
+      // 是否开启固定 Header
+      isFixedHeader: false,
 
-			/**
-			 * 界面设置
-			 */
-			// 是否开启菜单水平折叠效果
-			isCollapse: false,
-			// 是否开启菜单手风琴效果
-			isUniqueOpened: false,
-			// 是否开启固定 Header
-			isFixedHeader: false,
+      /**
+       * 界面显示
+       */
+      // 是否开启侧边栏 Logo
+      isShowLogo: true,
+      // 是否开启 Breadcrumb
+      isBreadcrumb: true,
+      // 是否开启 Breadcrumb 图标
+      isBreadcrumbIcon: false,
+      // 是否开启 Tagsview
+      isTagsview: true,
+      // 是否开启 Tagsview 图标
+      isTagsviewIcon: false,
+      // 是否开启 TagsView 缓存
+      isCacheTagsView: false,
+      // 是否开启 Footer 底部版权信息
+      isFooter: false,
+      // 是否开启灰色模式
+      isGrayscale: false,
+      // 是否开启色弱模式
+      isInvert: false,
 
-			/**
-			 * 界面显示
-			 */
-			// 是否开启侧边栏 Logo
-			isShowLogo: true,
-			// 是否开启 Breadcrumb
-			isBreadcrumb: true,
-			// 是否开启 Breadcrumb 图标
-			isBreadcrumbIcon: false,
-			// 是否开启 Tagsview
-			isTagsview: true,
-			// 是否开启 Tagsview 图标
-			isTagsviewIcon: false,
-			// 是否开启 TagsView 缓存
-			isCacheTagsView: false,
-			// 是否开启 Footer 底部版权信息
-			isFooter: false,
-			// 是否开启灰色模式
-			isGrayscale: false,
-			// 是否开启色弱模式
-			isInvert: false,
+      /**
+       * 其它设置
+       */
+      // 默认 Tagsview 风格，可选 1、 tags-style-one，自行扩展：
+      // 1、需修改 @/layout/navBars/breadcrumb/setings.vue `getThemeConfig.tagsStyle` el-option
+      // 2、需修改 @/layout/navBars/tagsView/tagsView.vue 代码最底部注释部分 css 样式
+      tagsStyle: 'tags-style-one',
+      // 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
+      animation: 'slide-right',
+      // 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
+      columnsAsideStyle: 'columns-round',
+      // 分栏布局风格：可ƒ选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
+      columnsAsideLayout: 'columns-vertical',
 
-			/**
-			 * 其它设置
-			 */
-			// 默认 Tagsview 风格，可选 1、 tags-style-one，自行扩展：
-			// 1、需修改 @/layout/navBars/breadcrumb/setings.vue `getThemeConfig.tagsStyle` el-option
-			// 2、需修改 @/layout/navBars/tagsView/tagsView.vue 代码最底部注释部分 css 样式
-			tagsStyle: 'tags-style-one',
-			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
-			animation: 'slide-right',
-			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
-			columnsAsideStyle: 'columns-round',
-			// 分栏布局风格：可ƒ选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
-			columnsAsideLayout: 'columns-vertical',
+      /**
+       * 布局切换
+       * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
+       * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
+       */
+      // 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
+      layout: 'defaults',
 
-			/**
-			 * 布局切换
-			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/setings.vue
-			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
-			 */
-			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
-			layout: 'defaults',
-
-			/**
-			 * 全局网站标题 / 副标题
-			 */
-			// 网站主标题（菜单导航、浏览器当前网页标题）
-			globalTitle: 'crmeb-admin',
-			// 网站副标题（登录页顶部文字）
-			globalViceTitle: 'SMALL@小柒',
-			// 网站描述（登录页顶部文字）
-			globalViceDes: 'vue2',
-			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
-			globalI18n: 'zh-cn',
-			// 默认全局组件大小，可选值"<|medium|small|mini>"，默认 ''
-			globalComponentSize: '',
-		},
-	},
-	mutations: {
-		// 设置布局配置
-		getThemeConfig(state, data) {
-			state.themeConfig = data;
-		},
-	},
-	actions: {
-		// 设置布局配置
-		setThemeConfig({ commit }, data) {
-			commit('getThemeConfig', data);
-		},
-	},
+      /**
+       * 全局网站标题 / 副标题
+       */
+      // 网站主标题（菜单导航、浏览器当前网页标题）
+      globalTitle: 'crmeb-admin',
+      // 网站副标题（登录页顶部文字）
+      globalViceTitle: 'SMALL@小柒',
+      // 网站描述（登录页顶部文字）
+      globalViceDes: 'vue2',
+      // 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
+      globalI18n: 'zh-cn',
+      // 默认全局组件大小，可选值"<|medium|small|mini>"，默认 ''
+      globalComponentSize: '',
+    },
+  },
+  mutations: {
+    // 设置布局配置
+    getThemeConfig(state, data) {
+      state.themeConfig = data;
+    },
+  },
+  actions: {
+    // 设置布局配置
+    setThemeConfig({ commit }, data) {
+      commit('getThemeConfig', data);
+    },
+  },
 };
 
 export default themeConfigModule;

template/admin/src/theme/app.scss

@@ -14,6 +14,7 @@
   --prev-bg-topBarColor: #282c34;
   --prev-bg-columnsMenuBar: #282c34;
   --prev-bg-columnsMenuBarColor: #e6e6e6;
+  --prev-bg-columnsMenuActiveColor: #ffffff;
   --prev-bg-menu-hover-ba-color: rgba(0, 0, 0, 0.2);
   --prev-bg-menu-active-color: #409eff;
   --prev-bg-main-color: #f8f8f8;
@@ -35,6 +36,7 @@
   --prev-border-color-light: #e4e7ed;
   --prev-border-color-lighter: #ebeef5;
   --prev-border-color-extra-light: #f2f6fc;
+  --prev-tag-active-color: #fff;
 }
 
 html,
@@ -53,7 +55,7 @@ body,
   height: 100%;
   .layout-aside {
     background: var(--prev-bg-menuBar);
-    box-shadow: 0px 0 1px rgba(0, 21, 41, 1%);
+    // box-shadow: 0px 0 1px rgba(0, 21, 41, 1%);
     height: inherit;
     position: relative;
     z-index: 1;

template/admin/src/theme/variables.scss

@@ -304,8 +304,8 @@ $positions: 'top', 'right', 'bottom', 'left';
 /* Switch 开关
 ------------------------------- */
 .el-switch.is-checked .el-switch__core {
-  border-color: var(--prev-color-primary);
-  background-color: var(--prev-color-primary);
+  border-color: var(--prev-color-primary) !important;
+  background-color: var(--prev-color-primary) !important;
 }
 .el-switch__label.is-active {
   color: var(--prev-color-primary);
@@ -941,6 +941,7 @@ $positions: 'top', 'right', 'bottom', 'left';
 }
 .el-divider__text {
   color: var(--prev-color-text-primary);
+  white-space: nowrap;
 }
 .el-drawer__close-btn:hover {
   color: var(--prev-color-primary);