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

WCS主题UI与登陆页面以及标题修改

Browse Source
This commit is contained in:
猫猫guowen
2025-07-14 14:35:43 +08:00
parent a41c994534
commit 3d78a5bd30
21 changed files with 460 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-ui/.env.development
View File

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = FORTUCKY WCS SYSTEM
# 开发环境配置
ENV = 'development'

2
ruoyi-ui/.env.production
View File

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = FORTUCKY WCS SYSTEM
# 生产环境配置
ENV = 'production'

2
ruoyi-ui/.env.staging
View File

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = FORTUCKY WCS SYSTEM
BABEL_ENV = production

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

@@ -10,7 +10,20 @@ import ThemePicker from "@/components/ThemePicker"
export default {
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>
<style scoped>

9
ruoyi-ui/src/assets/images/new.svg Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" fill="#1897fe"/>
<rect x="0" y="0" width="48" height="8" fill="#1897fe"/>
<rect x="0" y="8" width="48" height="32" fill="#ffffff"/>
<rect x="0" y="8" width="8" height="32" fill="#ffffff"/>
<rect x="8" y="16" width="32" height="4" fill="#f5f5f5"/>
<rect x="8" y="24" width="32" height="4" fill="#f5f5f5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 493 B

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

@@ -4,9 +4,9 @@
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-primary: #2a7fff;
$--color-success: #5ec468;
$--color-warning: #f97e19;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;

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

@@ -3,6 +3,15 @@
* 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 {
padding-top: 5px;
@@ -48,7 +57,7 @@
margin-bottom: 10px;
}
.ml10 {
margin-left: 10px;
margin-left: 10px;
}
.mt20 {
@@ -63,7 +72,7 @@
margin-bottom: 20px;
}
.ml20 {
margin-left: 20px;
margin-left: 20px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
@@ -147,8 +156,8 @@
/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
cursor: pointer;
margin-left: 5px;
cursor: pointer;
margin-left: 5px;
}
.el-table .el-dropdown, .el-icon-arrow-down {

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

@@ -68,6 +68,92 @@
border: none;
height: 100%;
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 {
@@ -86,6 +172,7 @@
& .theme-dark .is-active > .el-submenu__title {
color: $base-menu-color-active !important;
background-color: $base-menu-background !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
@@ -100,9 +187,16 @@
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item {
background-color: $base-sub-menu-background !important;
color: $base-menu-color !important;
&:hover {
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-active:#f4f4f5;
$base-menu-background:#304156;
$base-menu-color-active:#007dfe;
$base-menu-background:#2c2e3d;
$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-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-menu-light-color-active: #2a7ffe;
$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-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528;
*/
// 新主题风格
$base-menu-new-color: $base-menu-light-color;
$base-menu-new-color-active: #1879da;
$base-menu-new-background: #ffffff;
$base-logo-new-title-color: #ffffff;
$base-sub-menu-new-background: #f5f5f5;
$base-nav-new-background: #1897fe;
$base-nav-new-color: #ffffff;
// 侧边栏基础宽度，可以通过公式 200+8n 进行调整
$base-sidebar-width: 200px;
// the :export directive is the magic sauce for webpack
@@ -43,12 +59,34 @@ $base-sidebar-width: 200px;
:export {
menuColor: $base-menu-color;
menuLightColor: $base-menu-light-color;
menuLightColorActive: $base-menu-light-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;
menuLightBackground: $base-menu-light-background;
subMenuBackground: $base-sub-menu-background;
subMenuHover: $base-sub-menu-hover;
subMenuHoverColor: $base-sub-menu-hover-color;
sideBarWidth: $base-sidebar-width;
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;
line-height: 50px;
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 {
color: #97a8be;
cursor: text;
[data-theme='theme-new'] & {
color: #ffffff;
}
}
}
</style>

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

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

7
ruoyi-ui/src/lang/en.js
View File

@@ -1,12 +1,15 @@
// en.js
export default {
login: {
title: 'RuoYi Login Form',
title: 'FORTUCKY WMS SYSTEM',
logIn: 'Login in',
username: 'Username',
password: 'Password',
code: 'Code',
rememberMe: 'Remember Me'
rememberMe: 'Remember Me',
bottom:'Copyright © 2025 ForTucky All Rights Reserved.400-1882-319',
accountLogin: 'Account Login'
},
tagsView: {
refresh: 'Refresh',

6
ruoyi-ui/src/lang/zh.js
View File

@@ -5,12 +5,14 @@ import 'core-js/features/symbol'
export default {
login: {
title: '若依后台管理系统',
title: '福 莱 瑞 达 W C S 系 统',
logIn: '登录',
username: '账号',
password: '密码',
code: '验证码',
rememberMe: '记住密码'
rememberMe: '记住密码',
bottom:'Copyright © 2025 ForTucky All Rights Reserved.400-1882-319',
accountLogin: '账户登录'
},
tagsView: {
refresh: '刷新',

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

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

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

@@ -27,6 +27,16 @@
</i>
</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 class="drawer-item">
@@ -195,70 +205,70 @@ export default {
</script>
<style lang="scss" scoped>
.setting-drawer-content {
.setting-drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, .85);
font-size: 14px;
line-height: 22px;
font-weight: bold;
}
.setting-drawer-content {
.setting-drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, .85);
font-size: 14px;
line-height: 22px;
font-weight: bold;
}
.setting-drawer-block-checbox {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
margin-bottom: 20px;
.setting-drawer-block-checbox {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 10px;
margin-bottom: 20px;
.setting-drawer-block-checbox-item {
position: relative;
margin-right: 16px;
border-radius: 2px;
cursor: pointer;
.setting-drawer-block-checbox-item {
position: relative;
margin-right: 16px;
border-radius: 2px;
cursor: pointer;
img {
width: 48px;
height: 48px;
}
img {
width: 48px;
height: 48px;
}
.setting-drawer-block-checbox-selectIcon {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding-top: 15px;
padding-left: 24px;
color: #1890ff;
font-weight: 700;
font-size: 14px;
}
.setting-drawer-block-checbox-selectIcon {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
padding-top: 15px;
padding-left: 24px;
color: #1890ff;
font-weight: 700;
font-size: 14px;
}
}
}
}
.drawer-container {
padding: 20px;
.drawer-container {
padding: 20px;
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
.drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, .85);
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
.drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, .85);
font-size: 14px;
line-height: 22px;
}
.drawer-item {
color: rgba(0, 0, 0, .65);
font-size: 14px;
padding: 12px 0;
}
.drawer-switch {
float: right
}
line-height: 22px;
}
.drawer-item {
color: rgba(0, 0, 0, .65);
font-size: 14px;
padding: 12px 0;
}
.drawer-switch {
float: right
}
}
</style>

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

@@ -1,13 +1,15 @@
<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">
<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>
<!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
<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 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>
<!-- <img v-if="logo" :src="logo" class="sidebar-logo" /> -->
<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>
</transition>
</div>
@@ -55,9 +57,9 @@ export default {
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
height: 44px;
line-height: 50px;
background: #2b2f3a;
text-align: center;
overflow: hidden;
@@ -78,7 +80,7 @@ export default {
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-size: 17px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}

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

@@ -1,26 +1,26 @@
<template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : 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"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
<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" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : (settings.sideTheme === 'theme-new' ? variables.menuNewBackground : variables.menuLightBackground)"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : (settings.sideTheme === 'theme-new' ? variables.menuNewColor : variables.menuLightColor)"
:unique-opened="true"
:active-text-color="settings.sideTheme === 'theme-dark' ? variables.menuColorActive : (settings.sideTheme === 'theme-new' ? variables.menuNewColorActive : variables.menuLightColorActive)"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
@@ -30,28 +30,28 @@ import SidebarItem from "./SidebarItem"
import variables from "@/assets/styles/variables.scss"
export default {
components: { SidebarItem, Logo },
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
isCollapse() {
return !this.sidebar.opened
}
components: { SidebarItem, Logo },
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>

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

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

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

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

139
ruoyi-ui/src/views/login.vue
View File

@@ -1,63 +1,66 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="login-wrapper">
<h3 class="title">{{ $t('login.title') }}</h3>
<lang-select class="set-language" />
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
:placeholder="$t('login.username')"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
:placeholder="$t('login.password')"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
:placeholder="$t('login.code')"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">{{ $t('login.rememberMe') }}</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">{{ $t('login.logIn') }}</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<div class="form-title">{{ $t('login.accountLogin') }}</div>
<lang-select class="set-language" />
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
:placeholder="$t('login.username')"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
:placeholder="$t('login.password')"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
:placeholder="$t('login.code')"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">{{ $t('login.rememberMe') }}</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;height: 45px;font-size: 16px;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">{{ $t('login.logIn') }}</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</span>
<span>{{ $t('login.bottom') }}</span>
</div>
</div>
</template>
@@ -167,17 +170,29 @@ export default {
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.login-wrapper {
background: rgba(255, 255, 255, 0.5);
border-radius: 20px;
padding: 40px;
padding-top: 50px;
width: 480px;
height: 500px;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
font-size: 28px;
font-weight: 600;
color: #696a6d;
}
.login-form {
border-radius: 6px;
border-radius: 4px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
padding: 30px 30px 15px 30px;
.el-input {
height: 38px;
input {
@@ -219,4 +234,12 @@ export default {
.login-code-img {
height: 38px;
}
.form-title {
font-size: 16px;
font-weight: bold;
color: #818181;
text-align: left;
margin-bottom: 20px;
border-right: 3px solid #bebaba;
}
</style>

2
ruoyi-ui/vue.config.js
View File

@@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
const name = process.env.VUE_APP_TITLE || 'FORTUCKY WCS SYSTEM' // 网页标题
const baseUrl = 'http://localhost:8081' // 后端接口