xiaozhan
/
tobacco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加主题；

Browse Source
dev-theme
wx-jincw 6 days ago
parent 4ee662632d
commit 3da31c9629
15 changed files with 209 additions and 24 deletions
Show Stats Download Patch File Download Diff File

39
bs-ui/src/assets/images/green.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

5
bs-ui/src/assets/styles/index.scss
Unescape View File

@ -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
}

21
bs-ui/src/assets/styles/ruoyi.scss
Unescape View File

@ -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;
position: absolute;
// right: 0;
// 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;
}

9
bs-ui/src/assets/styles/sidebar.scss
Unescape View File

@ -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 {

25
bs-ui/src/assets/styles/variables.scss
Unescape View File

@ -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;
}

25
bs-ui/src/components/Breadcrumb/index.vue
Unescape View File

@ -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>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect" :style="noRedirectStyle">{{ item.meta.title }}</span>
<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()
},

11
bs-ui/src/components/Hamburger/index.vue
Unescape View File

@ -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')

9
bs-ui/src/components/Pagination/index.vue
Unescape View File

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

29
bs-ui/src/layout/components/Navbar.vue
Unescape View File

@ -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">
<size-select id="size-select" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="light" placement="bottom">
<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: {

10
bs-ui/src/layout/components/Settings/index.vue
Unescape View File

@ -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;">

6
bs-ui/src/layout/components/Sidebar/Logo.vue
Unescape View File

@ -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>

6
bs-ui/src/layout/components/Sidebar/index.vue
Unescape View File

@ -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"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : settings.sideTheme === 'theme-green' ? variables.menuGreenBackground:variables.menuLightBackground"
: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"

11
bs-ui/src/layout/components/TagsView/index.vue
Unescape View File

@ -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: {

4
bs-ui/src/settings.js
Unescape View File

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

23
bs-ui/src/store/modules/settings.js
Unescape View File

@ -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) {

Write Preview
Loading…
Cancel
Save