修改主题样式设置

ZR.Vue/package.json

@@ -58,7 +58,7 @@
     "babel-eslint": "10.1.0",
     "babel-jest": "23.6.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
-    "chalk": "2.4.2",
+    "chalk": "4.1.0",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
     "eslint": "6.7.2",

ZR.Vue/src/components/ThemePicker/index.vue

@@ -42,6 +42,7 @@ export default {
 
   methods: {
     async setTheme(val) {
+      console.log('%c setTheme Color','color:' + val)
       const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))

ZR.Vue/src/components/TopNav/index.vue

@@ -8,7 +8,7 @@
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu index="more" v-if="topMenus.length > visibleNumber">
+    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item :index="item.path" :key="index" v-if="index >= visibleNumber">

ZR.Vue/src/layout/components/Settings/index.vue

@@ -135,7 +135,6 @@ export default {
             "theme":"${this.theme}"
           }`
       );
-      this.msgSuccess("保存成功");
       setTimeout(loading.close(), 2000);
     },
     resetSetting() {

ZR.Vue/src/layout/index.vue

@@ -16,47 +16,51 @@
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
+import RightPanel from "@/components/RightPanel";
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
-import ResizeMixin from './mixin/ResizeHandler'
+import ResizeMixin from "./mixin/ResizeHandler";
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'Layout',
+  name: "Layout",
   components: {
     AppMain,
     Navbar,
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
   },
   mixins: [ResizeMixin],
   computed: {
     ...mapState({
-      theme: state => state.settings.theme,
+      theme: (state) => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
+      sideTheme: (state) => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
+      sidebar: (state) => state.app.sidebar,
-      device: state => state.app.device,
+      device: (state) => state.app.device,
-      showSettings: state => state.settings.showSettings,
+      showSettings: (state) => state.settings.showSettings,
-      needTagsView: state => state.settings.tagsView,
+      needTagsView: (state) => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
+      fixedHeader: (state) => state.settings.fixedHeader,
     }),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
+        mobile: this.device === "mobile",
-      }
+      };
-    }
+    },
+    variables() {
+      return variables;
+    },
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
-    }
+    },
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>

ZR.Vue/src/settings.js

@@ -1,5 +1,9 @@
 module.exports = {
   title: 'ZrAdmin.NET',
+  /**
+   * 主题颜色
+   */
+  theme: '#409EFF',
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */

ZR.Vue/src/store/modules/settings.js

@@ -1,11 +1,11 @@
 import defaultSettings from '@/settings'
 
-const { sideTheme, showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const { theme, sideTheme, showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
-  theme: storageSetting.theme || '#409EFF',
+  theme: storageSetting.theme || theme,//主题颜色
-  sideTheme: storageSetting.sideTheme || sideTheme,
+  sideTheme: storageSetting.sideTheme || sideTheme,//侧边主题样式
   showSettings: showSettings,
   tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
   fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,

ZR.Vue/src/views/login.vue

@@ -149,18 +149,20 @@ export default {
   height: 100%;
   // background-image: url("../assets/image/login-background.jpg");
   background-size: cover;
-  background-color: #2d3a4b;
+  background-color: rgba(56,157,170,.82);
 }
 .title {
   margin: 0px auto 30px auto;
   text-align: center;
-  color: #707070;
+  // color: #707070;
+  color: #fff;
 }
 
 .login-form {
   border-radius: 6px;
-  background: #ffffff;
+  // background: #ffffff;
-  width: 400px;
+  background-color: hsla(0,0%,100%,.3);
+  width: 350px;
   padding: 25px 25px 5px 25px;
   .el-input {
     height: 38px;

ZR.Vue/src/views/system/menu/index.vue

@@ -18,12 +18,17 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']">新增</el-button>
-        <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="handleShowSort" v-hasPermi="['system:menu:changeSort']">修改排序</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-edit" size="mini" @click="handleShowSort" v-hasPermi="['system:menu:changeSort']">修改排序</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="menuList" row-key="menuId" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" :default-expand-all="isExpandAll" row-key="menuId" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
       <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="80">
         <template slot-scope="scope">
@@ -229,6 +234,10 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
       // 显示状态数据字典
       visibleOptions: [],
       // 菜单状态数据字典
@@ -424,6 +433,14 @@ export default {
     handleShowSort() {
       this.showEditSort = !this.showEditSort;
     },
+    //展开/折叠操作
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
   },
 };
 </script>