From 3d78a5bd306c19c0175218f382b48b5308d4ef48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8C=AB=E7=8C=ABguowen?=
 <9290821+guowen-the-cat@user.noreply.gitee.com>
Date: Mon, 14 Jul 2025 14:35:43 +0800
Subject: [PATCH] =?UTF-8?q?WCS=E4=B8=BB=E9=A2=98UI=E4=B8=8E=E7=99=BB?=
 =?UTF-8?q?=E9=99=86=E9=A1=B5=E9=9D=A2=E4=BB=A5=E5=8F=8A=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/.env.development                     |   2 +-
 ruoyi-ui/.env.production                      |   2 +-
 ruoyi-ui/.env.staging                         |   2 +-
 ruoyi-ui/src/App.vue                          |  15 +-
 ruoyi-ui/src/assets/images/new.svg            |   9 ++
 .../src/assets/styles/element-variables.scss  |   6 +-
 ruoyi-ui/src/assets/styles/ruoyi.scss         |  17 ++-
 ruoyi-ui/src/assets/styles/sidebar.scss       |  94 ++++++++++++
 ruoyi-ui/src/assets/styles/variables.scss     |  78 +++++++---
 ruoyi-ui/src/components/Breadcrumb/index.vue  |  18 +++
 ruoyi-ui/src/components/Hamburger/index.vue   |   7 +-
 ruoyi-ui/src/lang/en.js                       |   7 +-
 ruoyi-ui/src/lang/zh.js                       |   6 +-
 ruoyi-ui/src/layout/components/Navbar.vue     |  22 +--
 .../src/layout/components/Settings/index.vue  | 122 ++++++++-------
 .../src/layout/components/Sidebar/Logo.vue    |  18 ++-
 .../src/layout/components/Sidebar/index.vue   |  88 +++++------
 .../src/layout/components/TagsView/index.vue  |  30 ++--
 ruoyi-ui/src/settings.js                      |   4 +-
 ruoyi-ui/src/views/login.vue                  | 139 ++++++++++--------
 ruoyi-ui/vue.config.js                        |   2 +-
 21 files changed, 460 insertions(+), 228 deletions(-)
 create mode 100644 ruoyi-ui/src/assets/images/new.svg

diff --git a/ruoyi-ui/.env.development b/ruoyi-ui/.env.development
index 302ecd1..4a29a35 100644
--- a/ruoyi-ui/.env.development
+++ b/ruoyi-ui/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = FORTUCKY WCS SYSTEM
 
 # 开发环境配置
 ENV = 'development'
diff --git a/ruoyi-ui/.env.production b/ruoyi-ui/.env.production
index b4893b0..242f36b 100644
--- a/ruoyi-ui/.env.production
+++ b/ruoyi-ui/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = FORTUCKY WCS SYSTEM
 
 # 生产环境配置
 ENV = 'production'
diff --git a/ruoyi-ui/.env.staging b/ruoyi-ui/.env.staging
index 209b64e..fb658c0 100644
--- a/ruoyi-ui/.env.staging
+++ b/ruoyi-ui/.env.staging
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = FORTUCKY WCS SYSTEM
 
 BABEL_ENV = production
 
diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue
index 12df51d..639556e 100644
--- a/ruoyi-ui/src/App.vue
+++ b/ruoyi-ui/src/App.vue
@@ -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>
diff --git a/ruoyi-ui/src/assets/images/new.svg b/ruoyi-ui/src/assets/images/new.svg
new file mode 100644
index 0000000..7ba0456
--- /dev/null
+++ b/ruoyi-ui/src/assets/images/new.svg
@@ -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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/assets/styles/element-variables.scss b/ruoyi-ui/src/assets/styles/element-variables.scss
index 1615ff2..964174a 100644
--- a/ruoyi-ui/src/assets/styles/element-variables.scss
+++ b/ruoyi-ui/src/assets/styles/element-variables.scss
@@ -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;
 
diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss
index ab4a1d2..bf5d06a 100644
--- a/ruoyi-ui/src/assets/styles/ruoyi.scss
+++ b/ruoyi-ui/src/assets/styles/ruoyi.scss
@@ -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 {
diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss
index 3558293..d1cb69e 100644
--- a/ruoyi-ui/src/assets/styles/sidebar.scss
+++ b/ruoyi-ui/src/assets/styles/sidebar.scss
@@ -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;
       }
     }
   }
diff --git a/ruoyi-ui/src/assets/styles/variables.scss b/ruoyi-ui/src/assets/styles/variables.scss
index 34484d4..754ca89 100644
--- a/ruoyi-ui/src/assets/styles/variables.scss
+++ b/ruoyi-ui/src/assets/styles/variables.scss
@@ -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
 }
diff --git a/ruoyi-ui/src/components/Breadcrumb/index.vue b/ruoyi-ui/src/components/Breadcrumb/index.vue
index 04cccc0..f348dc9 100644
--- a/ruoyi-ui/src/components/Breadcrumb/index.vue
+++ b/ruoyi-ui/src/components/Breadcrumb/index.vue
@@ -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>
diff --git a/ruoyi-ui/src/components/Hamburger/index.vue b/ruoyi-ui/src/components/Hamburger/index.vue
index 368b002..31d1863 100644
--- a/ruoyi-ui/src/components/Hamburger/index.vue
+++ b/ruoyi-ui/src/components/Hamburger/index.vue
@@ -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 {
diff --git a/ruoyi-ui/src/lang/en.js b/ruoyi-ui/src/lang/en.js
index 9e82d82..5882ea0 100644
--- a/ruoyi-ui/src/lang/en.js
+++ b/ruoyi-ui/src/lang/en.js
@@ -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',
diff --git a/ruoyi-ui/src/lang/zh.js b/ruoyi-ui/src/lang/zh.js
index c86e566..da5c5fd 100644
--- a/ruoyi-ui/src/lang/zh.js
+++ b/ruoyi-ui/src/lang/zh.js
@@ -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: '刷新',
diff --git a/ruoyi-ui/src/layout/components/Navbar.vue b/ruoyi-ui/src/layout/components/Navbar.vue
index 5c31196..5e37e98 100644
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -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 {
diff --git a/ruoyi-ui/src/layout/components/Settings/index.vue b/ruoyi-ui/src/layout/components/Settings/index.vue
index e1c26e0..2485eb8 100644
--- a/ruoyi-ui/src/layout/components/Settings/index.vue
+++ b/ruoyi-ui/src/layout/components/Settings/index.vue
@@ -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>
diff --git a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
index 4ec53eb..6e7adb8 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue
@@ -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;
     }
diff --git a/ruoyi-ui/src/layout/components/Sidebar/index.vue b/ruoyi-ui/src/layout/components/Sidebar/index.vue
index cd86ea6..13d8e82 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/index.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/index.vue
@@ -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>
diff --git a/ruoyi-ui/src/layout/components/TagsView/index.vue b/ruoyi-ui/src/layout/components/TagsView/index.vue
index 5ca5fff..fcaa11a 100644
--- a/ruoyi-ui/src/layout/components/TagsView/index.vue
+++ b/ruoyi-ui/src/layout/components/TagsView/index.vue
@@ -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;
diff --git a/ruoyi-ui/src/settings.js b/ruoyi-ui/src/settings.js
index 71a3a92..f7d1453 100644
--- a/ruoyi-ui/src/settings.js
+++ b/ruoyi-ui/src/settings.js
@@ -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',
 
   /**
    * 是否系统布局配置
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index afda156..304815b 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -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>
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index f483b3c..701de91 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -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' // 后端接口