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' ENV = 'development'

2
ruoyi-ui/.env.production
View File

@@ -1,5 +1,5 @@
# 页面标题 # 页面标题
VUE_APP_TITLE = 若依管理系统 VUE_APP_TITLE = FORTUCKY WCS SYSTEM
# 生产环境配置 # 生产环境配置
ENV = 'production' 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 BABEL_ENV = production

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/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 */ /* theme color */
$--color-primary: #1890ff; $--color-primary: #2a7fff;
$--color-success: #13ce66; $--color-success: #5ec468;
$--color-warning: #ffba00; $--color-warning: #f97e19;
$--color-danger: #ff4949; $--color-danger: #ff4949;
// $--color-info: #1E1E1E; // $--color-info: #1E1E1E;

17
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;
@@ -48,7 +57,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.ml10 { .ml10 {
margin-left: 10px; margin-left: 10px;
} }
.mt20 { .mt20 {
@@ -63,7 +72,7 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.ml20 { .ml20 {
margin-left: 20px; margin-left: 20px;
} }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { .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 { .el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
cursor: pointer; cursor: pointer;
margin-left: 5px; margin-left: 5px;
} }
.el-table .el-dropdown, .el-icon-arrow-down { .el-table .el-dropdown, .el-icon-arrow-down {

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

@@ -68,6 +68,92 @@
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 {

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

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

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

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

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 {

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

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

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

@@ -1,26 +1,26 @@
<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"
> >
<sidebar-item <sidebar-item
v-for="(route, index) in sidebarRouters" v-for="(route, index) in sidebarRouters"
:key="route.path + index" :key="route.path + index"
:item="route" :item="route"
:base-path="route.path" :base-path="route.path"
/> />
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
<script> <script>
@@ -30,28 +30,28 @@ import SidebarItem from "./SidebarItem"
import variables from "@/assets/styles/variables.scss" import variables from "@/assets/styles/variables.scss"
export default { export default {
components: { SidebarItem, Logo }, components: { SidebarItem, Logo },
computed: { computed: {
...mapState(["settings"]), ...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]), ...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() { activeMenu() {
const route = this.$route const route = this.$route
const { meta, path } = route const { meta, path } = route
// if set path, the sidebar will highlight the path you set // if set path, the sidebar will highlight the path you set
if (meta.activeMenu) { if (meta.activeMenu) {
return meta.activeMenu return meta.activeMenu
} }
return path return path
}, },
showLogo() { showLogo() {
return this.$store.state.settings.sidebarLogo return this.$store.state.settings.sidebarLogo
}, },
variables() { variables() {
return variables return variables
}, },
isCollapse() { isCollapse() {
return !this.sidebar.opened return !this.sidebar.opened
}
} }
}
} }
</script> </script>

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',
/** /**
* 是否系统布局配置 * 是否系统布局配置

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

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

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

@@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin') 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' // 后端接口 const baseUrl = 'http://localhost:8081' // 后端接口