lhq/FT501-WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改添加三个主题风格

Browse Source
This commit is contained in:
猫猫guowen
2025-07-04 10:53:34 +08:00
parent be34a04045
commit 6be43c4267
13 changed files with 264 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ruoyi-ui/src/App.vue
View File

@@ -10,7 +10,20 @@ import ThemePicker from "@/components/ThemePicker"
export default { export default {
name: "App", name: "App",
components: { ThemePicker } components: { ThemePicker },
computed: {
sideTheme() {
return this.$store.state.settings.sideTheme
}
},
watch: {
sideTheme: {
immediate: true,
handler(val) {
document.documentElement.setAttribute('data-theme', val)
}
}
}
} }
</script> </script>
<style scoped> <style scoped>

9
ruoyi-ui/src/assets/styles/ruoyi.scss
View File

@@ -3,6 +3,15 @@
* Copyright (c) 2019 ruoyi * Copyright (c) 2019 ruoyi
*/ */
/** 主题变量 **/
:root[data-theme='theme-new'] {
--navbar-background: #1897fe;
--navbar-color: #ffffff;
--tags-view-background: #ffffff;
--tags-view-text-color: #495060;
--tags-view-item-background: #ffffff;
}
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;

100
ruoyi-ui/src/assets/styles/sidebar.scss
View File

@@ -65,9 +65,95 @@
} }
.el-menu { .el-menu {
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; width: 100% !important;
[data-theme='theme-light'] & {
.el-menu-item,
.el-submenu__title {
color: rgba(0,0,0,.70);
background-color: #ebebeb;
&:hover,
&:focus {
color: #2a7ffe !important;
background-color: #ebebeb !important;
}
}
.el-menu-item.is-active,
.el-submenu.is-active > .el-submenu__title {
color: #2a7ffe !important;
background-color: #ebebeb !important;
}
.el-submenu .el-menu-item {
background-color: #f5f5f5 !important;
padding-left: 34px !important;
padding-right: 20px !important;
width: calc(100% - 3px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
&:hover,
&:focus {
color: #ffffff !important;
background-color: #2a7ffe !important;
}
&.is-active {
color: #ffffff !important;
background-color: #2a7ffe !important;
border-left: 3px solid #2a7ffe;
padding-left: 31px !important;
}
}
}
[data-theme='theme-new'] & {
.el-menu-item,
.el-submenu__title {
color: #495060;
background-color: #ffffff;
&:hover,
&:focus {
color: #1879da !important;
background-color: #ffffff !important;
}
}
.el-menu-item.is-active,
.el-submenu.is-active > .el-submenu__title {
color: #1879da !important;
background-color: #ffffff !important;
}
.el-submenu .el-menu-item {
background-color: #f5f5f5 !important;
padding-left: 34px !important;
padding-right: 20px !important;
width: calc(100% - 3px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
&:hover,
&:focus {
color: #117ae0 !important;
background-color: #e4f5ff !important;
}
&.is-active {
color: #117ae0 !important;
background-color: #e4f5ff !important;
border-left: 3px solid #117ae0;
padding-left: 31px !important;
}
}
}
} }
.el-menu-item, .el-submenu__title { .el-menu-item, .el-submenu__title {
@@ -86,6 +172,7 @@
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
background-color: $base-menu-background !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
@@ -100,9 +187,16 @@
& .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item { & .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important; background-color: $base-sub-menu-background !important;
color: $base-menu-color !important;
&:hover { &:hover {
background-color: $base-sub-menu-hover !important; background-color: $base-sub-menu-hover !important;
color: $base-sub-menu-hover-color !important;
}
&.is-active {
background-color: $base-sub-menu-hover !important;
color: $base-sub-menu-hover-color !important;
} }
} }
} }

78
ruoyi-ui/src/assets/styles/variables.scss
View File

@@ -10,32 +10,48 @@ $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; $base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5; $base-menu-color-active:#007dfe;
$base-menu-background:#304156; $base-menu-background:#2c2e3d;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-logo-title-background: #2c2e3d;
$base-tags-view-background: #2c2e3d;
$base-tags-view-color: #ffffff;
$base-sub-menu-background:#383b46d0;
$base-sub-menu-hover:#007dfe;
$base-sub-menu-hover-color:#ffffff;
// 浅色主题
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff; $base-menu-light-color-active: #2a7ffe;
$base-logo-light-title-color: #001529; $base-menu-light-background:#ebebeb;
$base-logo-light-title-color: #000000;
$base-logo-light-title-background: #ebebeb;
$base-tags-view-light-background: #f6f6f6;
$base-tags-view-light-color: #000000;
$base-sub-menu-light-background: #f5f5f5;
$base-sub-menu-light-hover: #2a7ffe;
$base-sub-menu-light-hover-color: #ffffff;
$base-sub-menu-background:#1f2d3d; // 新主题
$base-sub-menu-hover:#001528; $base-menu-new-color:rgba(0,0,0,.70);
$base-menu-new-background:#ebebeb;
$base-logo-new-title-color: #000000;
$base-logo-new-title-background: #1897fe;
$base-tags-view-new-background: #1897fe;
$base-tags-view-new-color: #ffffff;
// 自定义暗色菜单风格
/**
$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#fff;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); // 新主题风格
$base-menu-light-background:#ffffff; $base-menu-new-color: $base-menu-light-color;
$base-logo-light-title-color: #001529; $base-menu-new-color-active: #1879da;
$base-menu-new-background: #ffffff;
$base-sub-menu-background:#000c17; $base-logo-new-title-color: #ffffff;
$base-sub-menu-hover:#001528; $base-sub-menu-new-background: #f5f5f5;
*/ $base-nav-new-background: #1897fe;
$base-nav-new-color: #ffffff;
// 侧边栏基础宽度，可以通过公式 200+8n 进行调整
$base-sidebar-width: 200px; $base-sidebar-width: 200px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
@@ -43,12 +59,34 @@ $base-sidebar-width: 200px;
:export { :export {
menuColor: $base-menu-color; menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color; menuLightColor: $base-menu-light-color;
menuLightColorActive: $base-menu-light-color-active;
menuColorActive: $base-menu-color-active; menuColorActive: $base-menu-color-active;
subMenuLightBackground: $base-sub-menu-light-background;
subMenuLightHover: $base-sub-menu-light-hover;
subMenuLightHoverColor: $base-sub-menu-light-hover-color;
menuBackground: $base-menu-background; menuBackground: $base-menu-background;
menuLightBackground: $base-menu-light-background; menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background; subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover; subMenuHover: $base-sub-menu-hover;
subMenuHoverColor: $base-sub-menu-hover-color;
sideBarWidth: $base-sidebar-width; sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color logoLightTitleColor: $base-logo-light-title-color;
// 新主题变量导出
menuNewColor: $base-menu-new-color;
menuNewColorActive: $base-menu-new-color-active;
menuNewBackground: $base-menu-new-background;
logoNewTitleColor: $base-logo-new-title-color;
logoTitleBackground: $base-logo-title-background;
logoLightTitleBackground: $base-logo-light-title-background;
logoNewTitleBackground: $base-logo-new-title-background;
subMenuNewBackground: $base-sub-menu-new-background;
navNewBackground: $base-nav-new-background;
navNewColor: $base-nav-new-color;
tagsViewBackground: $base-tags-view-background;
tagsViewColor: $base-tags-view-color;
tagsViewLightBackground: $base-tags-view-light-background;
tagsViewLightColor: $base-tags-view-light-color;
tagsViewNewBackground: $base-tags-view-new-background;
tagsViewNewColor: $base-tags-view-new-color
} }

18
ruoyi-ui/src/components/Breadcrumb/index.vue
View File

@@ -95,9 +95,27 @@ export default {
font-size: 14px; font-size: 14px;
line-height: 50px; line-height: 50px;
margin-left: 8px; margin-left: 8px;
[data-theme='theme-new'] & {
color: #ffffff;
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
color: #ffffff !important;
}
.el-breadcrumb__separator {
color: #ffffff !important;
}
}
.no-redirect { .no-redirect {
color: #97a8be; color: #97a8be;
cursor: text; cursor: text;
[data-theme='theme-new'] & {
color: #ffffff;
}
} }
} }
</style> </style>

7
ruoyi-ui/src/components/Hamburger/index.vue
View File

@@ -30,12 +30,17 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.hamburger { .hamburger {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: #5a5e66;
[data-theme='theme-new'] & {
fill: #ffffff;
}
} }
.hamburger.is-active { .hamburger.is-active {

22
ruoyi-ui/src/layout/components/Navbar.vue
View File

@@ -9,13 +9,13 @@
<template v-if="device!=='mobile'"> <template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom"> <el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -55,8 +55,8 @@ import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull' import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect' import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch' import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git' // import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc' // import RuoYiDoc from '@/components/RuoYi/Doc'
export default { export default {
emits: ['setLayout'], emits: ['setLayout'],
@@ -67,8 +67,8 @@ export default {
Screenfull, Screenfull,
SizeSelect, SizeSelect,
Search, Search,
RuoYiGit, // RuoYiGit,
RuoYiDoc // RuoYiDoc
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
@@ -111,11 +111,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 导航栏高度，可以通过公式 44+8n 进行调整
.navbar { .navbar {
height: 50px; height: 44px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; background: var(--navbar-background, #fff);
color: var(--navbar-color, #5a5e66);
box-shadow: 0 1px 4px rgba(0,21,41,.08); box-shadow: 0 1px 4px rgba(0,21,41,.08);
.hamburger-container { .hamburger-container {
@@ -148,7 +150,7 @@ export default {
.right-menu { .right-menu {
float: right; float: right;
height: 100%; height: 100%;
line-height: 50px; line-height: 44px;
&:focus { &:focus {
outline: none; outline: none;
@@ -159,7 +161,7 @@ export default {
padding: 0 8px; padding: 0 8px;
height: 100%; height: 100%;
font-size: 18px; font-size: 18px;
color: #5a5e66; color: inherit;
vertical-align: text-bottom; vertical-align: text-bottom;
&.hover-effect { &.hover-effect {

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

@@ -27,6 +27,16 @@
</i> </i>
</div> </div>
</div> </div>
<div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-new')">
<img src="@/assets/images/new.svg" alt="new">
<div v-if="sideTheme === 'theme-new'" 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> </div>
<div class="drawer-item"> <div class="drawer-item">

18
ruoyi-ui/src/layout/components/Sidebar/Logo.vue
View File

@@ -1,13 +1,15 @@
<template> <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.logoTitleBackground : (sideTheme === 'theme-new' ? variables.logoNewTitleBackground : variables.logoLightTitleBackground) }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <!-- <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> <img v-if="logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : (sideTheme === 'theme-new' ? variables.logoNewTitleColor : variables.logoLightTitleColor) }">{{ title }} </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <img v-if="logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : (sideTheme === 'theme-new' ? variables.logoNewTitleColor : variables.logoLightTitleColor) }">{{ title }} </h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
@@ -55,9 +57,9 @@ export default {
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 44px;
line-height: 50px; line-height: 50px;
background: #2b2f3a;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@@ -78,7 +80,7 @@ export default {
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
line-height: 50px; line-height: 50px;
font-size: 14px; font-size: 17px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle; vertical-align: middle;
} }

8
ruoyi-ui/src/layout/components/Sidebar/index.vue
View File

@@ -1,14 +1,14 @@
<template> <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-new' ? variables.menuNewBackground : variables.menuLightBackground) }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : (settings.sideTheme === 'theme-new' ? variables.menuNewBackground : variables.menuLightBackground)"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : (settings.sideTheme === 'theme-new' ? variables.menuNewColor : variables.menuLightColor)"
:unique-opened="true" :unique-opened="true"
:active-text-color="settings.theme" :active-text-color="settings.sideTheme === 'theme-dark' ? variables.menuColorActive : (settings.sideTheme === 'theme-new' ? variables.menuNewColorActive : variables.menuLightColorActive)"
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
> >

30
ruoyi-ui/src/layout/components/TagsView/index.vue
View File

@@ -31,6 +31,7 @@
<script> <script>
import ScrollPane from './ScrollPane' import ScrollPane from './ScrollPane'
import path from 'path' import path from 'path'
import variables from '@/assets/styles/variables.scss'
export default { export default {
components: { ScrollPane }, components: { ScrollPane },
@@ -52,6 +53,9 @@ export default {
}, },
theme() { theme() {
return this.$store.state.settings.theme return this.$store.state.settings.theme
},
sideTheme() {
return this.$store.state.settings.sideTheme
} }
}, },
watch: { watch: {
@@ -77,10 +81,12 @@ export default {
}, },
activeStyle(tag) { activeStyle(tag) {
if (!this.isActive(tag)) return {} if (!this.isActive(tag)) return {}
return { const style = {
"background-color": this.theme, "background-color": this.sideTheme === 'theme-dark' ? '#515466' : (this.sideTheme === 'theme-new' ? variables.tagsViewNewBackground : variables.tagsViewLightBackground),
"border-color": this.theme "color": this.sideTheme === 'theme-dark' ? '#ffffff' : (this.sideTheme === 'theme-new' ? variables.tagsViewNewColor : variables.tagsViewLightColor),
"border-color": "#ccc"
} }
return style
}, },
isAffix(tag) { isAffix(tag) {
return tag.meta && tag.meta.affix return tag.meta && tag.meta.affix
@@ -235,9 +241,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-view-container { .tags-view-container {
height: 34px; height: 32px;
width: 100%; width: 100%;
background: #fff; background: var(--tags-view-background, #fff);
border-bottom: 1px solid #d8dce5; border-bottom: 1px solid #d8dce5;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper { .tags-view-wrapper {
@@ -245,11 +251,11 @@ export default {
display: inline-block; display: inline-block;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
height: 26px; height: 24px;
line-height: 26px; line-height: 24px;
border: 1px solid #d8dce5; border: 1px solid #d8dce5;
color: #495060; color: var(--tags-view-text-color, #495060);
background: #fff; background: var(--tags-view-item-background, #fff);
padding: 0 8px; padding: 0 8px;
font-size: 12px; font-size: 12px;
margin-left: 5px; margin-left: 5px;
@@ -261,12 +267,10 @@ export default {
margin-right: 15px; margin-right: 15px;
} }
&.active { &.active {
background-color: #42b983; border-color: #d8dce5;
color: #fff;
border-color: #42b983;
&::before { &::before {
content: ''; content: '';
background: #fff; background: currentColor;
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;

4
ruoyi-ui/src/settings.js
View File

@@ -5,9 +5,9 @@ module.exports = {
title: process.env.VUE_APP_TITLE, title: process.env.VUE_APP_TITLE,
/** /**
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light * 侧边栏主题 深色主题theme-dark，浅色主题theme-light，新主题theme-new
*/ */
sideTheme: 'theme-dark', sideTheme: 'theme-new',
/** /**
* 是否系统布局配置 * 是否系统布局配置

7
ruoyi-ui/src/views/bas/BasSupplier/index.vue
View File

@@ -480,3 +480,10 @@ export default {
} }
} }
</script> </script>
<style scoped>
.el-form-item >>> .el-form-item__label {
white-space: nowrap;
width: auto;
min-width: fit-content;
}
</style>