feat: 增加主题；

bs-ui/src/assets/images/green.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="#2AD8AD">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#2AD8AD" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

bs-ui/src/assets/styles/index.scss

@@ -122,6 +122,7 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  background-color: rgba($color: #ffffff, $alpha: 0.8);
 }
 
 .components-container {
@@ -133,6 +134,10 @@ aside {
   margin-top: 30px;
 }
 
+.table-top-opretar {
+  margin-bottom: 10px;
+}
+
 .text-center {
   text-align: center
 }

bs-ui/src/assets/styles/ruoyi.scss

@@ -76,6 +76,7 @@
 }
 
 .el-table {
+  opacity: 0.8;
 	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
 		th {
 			word-break: break-word;
@@ -119,8 +120,8 @@
 }
 
 .pagination-container .el-pagination {
-	right: 0;
+	// right: 0;
-	position: absolute;
+	// position: absolute;
 }
 
 @media ( max-width : 768px) {
@@ -177,6 +178,10 @@
 	float: right !important;
 }
 
+.el-card {
+  background-color: rgba($color: #FFFFFF, $alpha: 0.8) !important;
+}
+
 .el-card__header {
 	padding: 14px 15px 7px;
 	min-height: 40px;
@@ -275,3 +280,15 @@
 	position: relative;
 	float: right;
 }
+
+.el-input__inner {
+  background-color: rgba($color: #FFFFFF, $alpha: 0.8) !important;
+}
+
+.el-range-input {
+  background-color: transparent;
+}
+
+.el-tree {
+  background: rgba($color: #FFFFFF, $alpha: 0.5) !important;
+}

bs-ui/src/assets/styles/sidebar.scss

@@ -105,6 +105,15 @@
         background-color: $base-sub-menu-hover !important;
       }
     }
+
+    & .theme-green .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-green .el-sub-menu .el-menu-item {
+      background-color: $base-menu-green-background !important;
+      &:hover {
+        color: $base-navbar-green-color;
+        background-color: $base-navbar-green-background !important;
+      }
+    }
   }
 
   .hideSidebar {

bs-ui/src/assets/styles/variables.scss

@@ -21,6 +21,20 @@ $base-logo-light-title-color: #001529;
 $base-sub-menu-background:#1f2d3d;
 $base-sub-menu-hover:#001528;
 
+// 自定义风格
+$base-menu-green-color: #FFFFFF;
+$base-menu-green-background: transparent;//#2AD8AD;//rgba($color: #2AD8AD, $alpha: 0.1);
+$base-logo-green-title-color: #FFFFFF;
+
+// 顶部菜单主题风格
+$base-navbar-color: #999093;
+$base-navbar-icon-color: #5a5e66;
+$base-navbar-background: #ffffff;
+
+$base-navbar-green-color: #ffffff;
+$base-navbar-green-background: transparent;
+
+
 // 自定义暗色菜单风格
 /**
 $base-menu-color:hsla(0,0%,100%,.65);
@@ -50,5 +64,14 @@ $base-sidebar-width: 200px;
   subMenuHover: $base-sub-menu-hover;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+  logoLightTitleColor: $base-logo-light-title-color;
+  
+  menuGreenColor: $base-menu-green-color;
+	menuGreenBackground: $base-menu-green-background;
+	logoGreenTitleColor: $base-logo-green-title-color;
+	navbarColor: $base-navbar-color;
+	navbarIconColor: $base-navbar-icon-color;
+	navbarGreenColor: $base-navbar-green-color;
+	navbarBackground: $base-navbar-background;
+	navbarGreenBackground: $base-navbar-green-background;
 }

bs-ui/src/components/Breadcrumb/index.vue

@@ -2,8 +2,8 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect" :style="noRedirectStyle">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+        <a v-else :style="customStyle" @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -25,6 +25,27 @@ export default {
       this.getBreadcrumb()
     }
   },
+  computed: {
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
+    },
+    noRedirectStyle() {
+      if (this.sideTheme === 'theme-green') {
+        return {
+          color: '#EEEEEE',
+        }
+      }
+      return {};
+    },
+    customStyle() {
+      if (this.sideTheme === 'theme-green') {
+        return {
+          color: '#FFFFFF',
+        }
+      }
+      return {};
+    }
+  },
   created() {
     this.getBreadcrumb()
   },

bs-ui/src/components/Hamburger/index.vue

@@ -3,6 +3,7 @@
     <svg
       :class="{'is-active':isActive}"
       class="hamburger"
+      :fill="sideTheme === 'theme-green' ? variables.navbarGreenColor : ''"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
       width="64"
@@ -14,6 +15,8 @@
 </template>
 
 <script>
+import variables from '@/assets/styles/variables.scss'
+
 export default {
   name: 'Hamburger',
   props: {
@@ -22,6 +25,14 @@ export default {
       default: false
     }
   },
+  computed: {
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
+    },
+    variables() {
+      return variables;
+    },
+  },
   methods: {
     toggleClick() {
       this.$emit('toggleClick')

bs-ui/src/components/Pagination/index.vue

@@ -103,10 +103,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .pagination-container {
-  background: #fff;
+  background-color: rgba($color: #ffffff, $alpha: 0.8);
-  padding: 32px 16px;
+  min-height: 40px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 .pagination-container.hidden {
   display: none;

bs-ui/src/layout/components/Navbar.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" :style="{
+    background: sideTheme === 'theme-green' ? variables.navbarGreenBackground : variables.navbarBackground
+  }">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
@@ -7,12 +9,12 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
+        <search id="header-search" class="right-menu-item" :style="menuStyle" />
 
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+        <screenfull id="screenfull" class="right-menu-item hover-effect" :style="menuStyle"/>
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <el-tooltip content="布局大小" effect="light" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+          <size-select id="size-select" class="right-menu-item hover-effect" :style="menuStyle" />
         </el-tooltip>
 
       </template>
@@ -20,7 +22,7 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom" :style="menuStyle" />
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/user/profile">
@@ -46,6 +48,7 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
+import variables from '@/assets/styles/variables.scss'
 
 export default {
   components: {
@@ -77,6 +80,20 @@ export default {
       get() {
         return this.$store.state.settings.topNav
       }
+    },
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
+    },
+    variables() {
+      return variables;
+    },
+    menuStyle() {
+      if (this.sideTheme === 'theme-green') {
+        return {
+          color: variables.navbarGreenColor
+        }
+      }
+      return {};
     }
   },
   methods: {

bs-ui/src/layout/components/Settings/index.vue

@@ -7,6 +7,16 @@
             <h3 class="drawer-title">主题风格设置</h3>
           </div>
           <div class="setting-drawer-block-checbox">
+            <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-green')">
+              <img src="@/assets/images/green.svg" alt="green">
+              <div v-if="sideTheme === 'theme-green'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+                <i aria-label="图标: check" class="anticon anticon-check">
+                  <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme" aria-hidden="true" focusable="false" class="">
+                    <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
+                  </svg>
+                </i>
+              </div>
+            </div>
             <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
               <img src="@/assets/images/dark.svg" alt="dark">
               <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">

bs-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : sideTheme === 'theme-green' ? variables.menuGreenBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : sideTheme === 'theme-green' ? variables.logoGreenTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : sideTheme === 'theme-green' ? variables.logoGreenTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
     </transition>
   </div>

bs-ui/src/layout/components/Sidebar/index.vue

@@ -1,12 +1,12 @@
 <template>
-    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : settings.sideTheme === 'theme-green' ? variables.menuGreenBackground : variables.menuLightBackground }">
         <logo v-if="showLogo" :collapse="isCollapse" />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
                 :collapse="isCollapse"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : settings.sideTheme === 'theme-green' ? variables.menuGreenBackground:variables.menuLightBackground"
-                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : settings.sideTheme === 'theme-green' ? variables.menuGreenColor:variables.menuLightColor"
                 :unique-opened="true"
                 :active-text-color="settings.theme"
                 :collapse-transition="false"

bs-ui/src/layout/components/TagsView/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div id="tags-view-container" class="tags-view-container">
+  <div id="tags-view-container" class="tags-view-container" :style="{
+    background: sideTheme === 'theme-green' ? variables.navbarGreenBackground : variables.navbarBackground
+  }">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
@@ -31,6 +33,7 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
+import variables from '@/assets/styles/variables.scss'
 
 export default {
   components: { ScrollPane },
@@ -52,6 +55,12 @@ export default {
     },
     theme() {
       return this.$store.state.settings.theme;
+    },
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
+    },
+    variables() {
+      return variables;
     }
   },
   watch: {

bs-ui/src/settings.js

@@ -1,8 +1,8 @@
 module.exports = {
   /**
-   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light，绿色主题theme-green
    */
-  sideTheme: 'theme-light',
+  sideTheme: 'theme-green',
 
   /**
    * 是否系统布局配置

bs-ui/src/store/modules/settings.js

@@ -1,11 +1,12 @@
 import defaultSettings from '@/settings'
+import bgImg from '@/assets/images/login-background.jpg'
 
 const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 const state = {
   title: '',
-  theme: storageSetting.theme || '#409EFF',
+  theme: storageSetting.theme || '#13C2C2',
   sideTheme: storageSetting.sideTheme || sideTheme,
   showSettings: showSettings,
   topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
@@ -22,10 +23,30 @@ const mutations = {
   }
 }
 
+const body = document.querySelector('body');
+const img = document.createElement('img');
+img.setAttribute('src', bgImg);
+img.style.width = '100%';
+img.style.height = '100%';
+img.style.position = 'fixed';
+img.style.left = '0';
+img.style.top = '0';
+img.style.zIndex = '-1';
+img.style.objectFit = 'cover';
+body.appendChild(img);
+
 const actions = {
   // 修改布局设置
   changeSetting({ commit }, data) {
     commit('CHANGE_SETTING', data)
+    
+    // 获取当前主题名称，将其隐藏
+    if (state.sideTheme !== 'theme-green') {
+      img.style.display = 'none';
+    } else {
+      img.style.display = 'inline-block';
+    }
+    
   },
   // 设置网页标题
   setTitle({ commit }, title) {