From 950337db7244e104719d249fe2921ec87d3fec2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=AE=E5=BE=AE=E4=B8=80=E7=AC=91?= <709648985@qq.com>
Date: Mon, 11 Aug 2025 14:39:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=B8=90=E5=8F=98=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                        |   2 +-
 .env.production                         |   2 +-
 index.html                              |   2 +-
 package.json                            |   2 +-
 src/assets/styles/sidebar.scss          | 221 +++++++++++++++++++++++-
 src/assets/styles/variables.module.scss |  48 +++--
 src/layout/components/Sidebar/Logo.vue  |   6 +-
 7 files changed, 257 insertions(+), 26 deletions(-)

diff --git a/.env.development b/.env.development
index 9fa84f9..399bf06 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 物联网管理系统
+VITE_APP_TITLE = 星汉研创科技
 
 # 开发环境配置
 VITE_APP_ENV = 'development'
diff --git a/.env.production b/.env.production
index 1894aef..8ef038f 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 物联网管理系统
+VITE_APP_TITLE = 星汉研创科技
 
 # 生产环境配置 晶全1
 VITE_APP_ENV = 'https://fuyuanshen.com/backend'
diff --git a/index.html b/index.html
index 47ca3f6..1b06228 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="icon" href="/favicon.ico" />
-    <title>物联网管理系统</title>
+    <title>星汉研创科技</title>
     <!--[if lt IE 11
       ]><script>
         window.location.href = '/html/ie.html';
diff --git a/package.json b/package.json
index bed5e76..7b9d0ee 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package",
   "name": "fys",
   "version": "5.4.0-2.4.0",
-  "description": "物联网管理系统",
+  "description": "星汉研创科技",
   "author": "LionLi",
   "license": "MIT",
   "type": "module",
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 7410b6f..43ff48c 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -16,7 +16,7 @@
     -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    background: #2c3e50; // 精确匹配设计UI的背景色
     height: 100%;
     position: fixed;
     font-size: 0;
@@ -25,8 +25,15 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+    // 使用CSS变量定义边框样式，支持动态修改
+    border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor);
+    box-shadow: var(--sidebarBoxShadow);
+    
+    // 备用方案：如果CSS变量不支持，使用默认样式
+    @supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) {
+      border-right: none;
+      box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+    }
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -90,17 +97,23 @@
     .theme-dark .el-sub-menu__title {
       &:hover {
         background-color: $base-sub-menu-title-hover !important;
+        transition: all 0.3s ease;
       }
     }
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
         background-color: rgba(0, 0, 0, 0.05) !important;
+        transition: all 0.3s ease;
       }
     }
 
     & .theme-dark .is-active > .el-sub-menu__title {
-      color: $base-menu-color-active !important;
+      color: #ffffff !important;
+      background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+      border-radius: 4px;
+      margin: 2px 8px;
+      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
     }
 
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -108,6 +121,7 @@
       min-width: $base-sidebar-width !important;
       &:hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
+        transition: all 0.3s ease;
       }
     }
 
@@ -117,6 +131,7 @@
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
+        transition: all 0.3s ease;
       }
     }
 
@@ -125,6 +140,7 @@
       &:hover {
         // you can use $sub-menuHover
         background-color: $base-menu-hover !important;
+        transition: all 0.3s ease;
       }
     }
     & .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -132,6 +148,7 @@
       &:hover {
         // you can use $sub-menuHover
         background-color: rgba(0, 0, 0, 0.04) !important;
+        transition: all 0.3s ease;
       }
     }
   }
@@ -232,3 +249,199 @@
     }
   }
 }
+
+// 自定义侧边栏样式类
+.sidebar-modern {
+  .sidebar-container {
+    background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
+    border-right: none;
+  }
+}
+
+.sidebar-minimal {
+  .sidebar-container {
+    background: #304156;
+    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+    border-right: none;
+  }
+}
+
+.sidebar-elegant {
+  .sidebar-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.25);
+    border-right: none;
+  }
+}
+
+// 激活菜单项的渐变效果
+.el-menu-item.is-active {
+  background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+  color: #ffffff !important;
+  border-radius: 4px;
+  margin: 2px 8px;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+// 子菜单激活状态
+.el-sub-menu.is-active > .el-sub-menu__title {
+  background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+  color: #ffffff !important;
+  border-radius: 4px;
+  margin: 2px 8px;
+  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+// 更精确的菜单项样式匹配图片效果
+.sidebar-container {
+  // 确保背景色与图片一致
+  background: #2c3e50 !important;
+  
+  .el-menu-item {
+    &.is-active {
+      background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+      color: #ffffff !important;
+      border-radius: 4px;
+      margin: 2px 8px;
+      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+      transition: all 0.3s ease;
+    }
+  }
+  
+  .el-sub-menu {
+    &.is-active > .el-sub-menu__title {
+      background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+      color: #ffffff !important;
+      border-radius: 4px;
+      margin: 2px 8px;
+      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+      transition: all 0.3s ease;
+    }
+  }
+  
+  // 子菜单项激活状态（只有文字颜色变化，无背景）
+  .el-sub-menu .el-menu-item {
+    &.is-active {
+      background: transparent !important;
+      color: #409eff !important;
+      border-radius: 0;
+      margin: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+// 精确匹配设计UI的样式类
+.sidebar-design-ui {
+  .sidebar-container {
+    background: #2c3e50 !important;
+    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important;
+    border-right: none !important;
+  }
+  
+  .sidebar-logo-container {
+    background: #2c3e50 !important;
+  }
+  
+  .el-menu {
+    background: #2c3e50 !important;
+  }
+  
+  // 非激活菜单项样式
+  .el-menu-item,
+  .el-sub-menu__title {
+    color: #bfcbd9 !important;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1) !important;
+    }
+  }
+  
+  // 激活的主菜单项（正确的渐变背景）
+  .el-menu-item.is-active,
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+    color: #ffffff !important;
+    border-radius: 4px;
+    margin: 2px 8px;
+    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  }
+  
+  // 激活的子菜单项（只有蓝色文字，无背景）
+  .el-sub-menu .el-menu-item.is-active {
+    background: transparent !important;
+    color: #409eff !important;
+    border-radius: 0;
+    margin: 0;
+    box-shadow: none;
+  }
+  
+  // 子菜单背景色
+  .el-sub-menu .el-menu {
+    background: #1f2d3d !important;
+  }
+  
+  // 子菜单项悬停效果
+  .el-sub-menu .el-menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+  }
+  
+  // 主菜单项悬停效果
+  .el-menu-item:hover,
+  .el-sub-menu__title:hover {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+  }
+}
+
+// 全局菜单样式匹配设计UI
+#app .sidebar-container {
+  // 确保背景色一致
+  background: #2c3e50 !important;
+  
+  // 菜单项基础样式
+  .el-menu-item,
+  .el-sub-menu__title {
+    color: #bfcbd9 !important;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1) !important;
+    }
+  }
+  
+  // 激活的主菜单项
+  .el-menu-item.is-active,
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
+    color: #ffffff !important;
+    border-radius: 4px;
+    margin: 2px 8px;
+    box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  }
+  
+  // 激活的子菜单项
+  .el-sub-menu .el-menu-item.is-active {
+    background: transparent !important;
+    color: #409eff !important;
+    border-radius: 0;
+    margin: 0;
+    box-shadow: none;
+  }
+  
+  // 子菜单背景
+  .el-sub-menu .el-menu {
+    background: #1f2d3d !important;
+  }
+  
+  // 图标颜色
+  .svg-icon {
+    color: inherit !important;
+  }
+  
+  // 箭头图标颜色
+  .el-sub-menu__icon-arrow {
+    color: inherit !important;
+  }
+}
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 3aa871b..a7959e1 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -1,19 +1,28 @@
 // 全局SCSS变量
 :root {
-  --menuBg: #304156;
-  --menuColor: #bfcbd9;
-  --menuActiveText: #f4f4f5;
-  --menuHover: #263445;
+  --menuBg: #2c3e50; // 精确匹配图片中的深色背景
+  --menuColor: #bfcbd9; // 非激活菜单项的文字颜色
+  --menuActiveText: #ffffff; // 激活菜单项的文字颜色
+  --menuHover: #34495e; // 悬停时的背景色
 
-  --subMenuBg: #1f2d3d;
-  --subMenuActiveText: #f4f4f5;
-  --subMenuHover: #001528;
-  --subMenuTitleHover: #293444;
+  --subMenuBg: #1f2d3d; // 子菜单背景色
+  --subMenuActiveText: #409eff; // 激活子菜单项的文字颜色（蓝色）
+  --subMenuHover: #001528; // 子菜单悬停背景色
+  --subMenuTitleHover: #293444; // 子菜单标题悬停背景色
+
+  // 激活菜单项的渐变颜色 - 根据设计UI调整
+  --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
 
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
   --tableHeaderTextColor: #515a6e;
 
+  // 侧边框样式变量 - 实现无边框但有阴影的效果
+  --sidebarBorderColor: transparent;
+  --sidebarBorderWidth: 0px;
+  --sidebarBorderStyle: solid;
+  --sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+
   // ele
   --brder-color: #e8e8e8;
 
@@ -23,20 +32,29 @@
 }
 
 html.dark {
-  --menuBg: #1d1e1f;
+  --menuBg: #2c3e50; // 保持与浅色模式一致
   --menuColor: #bfcbd9;
-  --menuActiveText: #f4f4f5;
-  --menuHover: #171819;
+  --menuActiveText: #ffffff;
+  --menuHover: #34495e;
 
-  --subMenuBg: #1d1e1f;
-  --subMenuActiveText: #1d1e1f;
-  --subMenuHover: #171819;
-  --subMenuTitleHover: #171819;
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #409eff; // 激活子菜单项保持蓝色
+  --subMenuHover: #001528;
+  --subMenuTitleHover: #293444;
+
+  // 激活菜单项的渐变颜色 - 根据设计UI调整
+  --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
 
   --fixedHeaderBg: #171819;
   --tableHeaderBg: var(--el-bg-color);
   --tableHeaderTextColor: var(--el-text-color);
 
+  // 深色模式侧边框样式变量 - 实现无边框但有阴影的效果
+  --sidebarBorderColor: transparent;
+  --sidebarBorderWidth: 0px;
+  --sidebarBorderStyle: solid;
+  --sidebarBoxShadow: 1px 0 4px rgba(0, 0, 0, 0.15);
+
   // 覆盖ele 高亮当前行的标准暗色
   .el-tree-node__content {
     --el-color-primary-light-9: #262727;
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index f51b3e1..cbc5048 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -34,7 +34,7 @@ defineProps({
   }
 });
 
-const title = ref('物联网管理系统');
+const title = ref('星汉研创科技');
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
 </script>
@@ -54,7 +54,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #2c3e50; // 精确匹配设计UI的背景色
   text-align: center;
   overflow: hidden;
 
@@ -75,7 +75,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
       color: #fff;
       font-weight: 600;
       line-height: 50px;
-      font-size: 14px;
+      font-size: 16px; // 匹配设计UI的字体大小
       font-family:
         Avenir,
         Helvetica Neue,