修改全局样式（工业风，提交工业风skill

gear-ui3/src/layout/components/AppMain.vue

@@ -42,6 +42,7 @@ function addIframe() {
   width: 100%;
   position: relative;
   overflow: hidden;
+  background: var(--app-bg);
 }
 
 .app-main:has(.copyright) {
@@ -78,11 +79,11 @@ function addIframe() {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
+  background-color: #edf2f7;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #c0c0c0;
+  background-color: #aab7c4;
   border-radius: 3px;
 }
 </style>

gear-ui3/src/layout/components/Navbar.vue

@@ -102,11 +102,13 @@ function toggleTheme() {
 
 <style lang='scss' scoped>
 .navbar {
-  height: 50px;
+  height: 48px;
   overflow: hidden;
   position: relative;
-  background: var(--navbar-bg);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  background: linear-gradient(90deg, #1c2b3a 0%, #25384a 100%);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  color: #d7e2ee;
 
   .hamburger-container {
     line-height: 46px;
@@ -115,9 +117,10 @@ function toggleTheme() {
     cursor: pointer;
     transition: background 0.3s;
     -webkit-tap-highlight-color: transparent;
+    color: #d7e2ee;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.025);
+      background: rgba(255, 255, 255, 0.04);
     }
   }
 
@@ -138,7 +141,7 @@ function toggleTheme() {
   .right-menu {
     float: right;
     height: 100%;
-    line-height: 50px;
+    line-height: 48px;
     display: flex;
 
     &:focus {
@@ -147,10 +150,10 @@ function toggleTheme() {
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
+      padding: 0 10px;
       height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
+      font-size: 16px;
+      color: #d7e2ee;
       vertical-align: text-bottom;
 
       &.hover-effect {
@@ -158,7 +161,7 @@ function toggleTheme() {
         transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, 0.025);
+          background: rgba(255, 255, 255, 0.05);
         }
       }
 
@@ -181,23 +184,28 @@ function toggleTheme() {
       padding-right: 0px;
 
       .avatar-wrapper {
-        margin-top: 10px;
+        margin-top: 9px;
         right: 5px;
         position: relative;
+        display: flex;
+        align-items: center;
+        gap: 8px;
 
         .user-avatar {
           cursor: pointer;
-          width: 30px;
-          height: 30px;
+          width: 28px;
+          height: 28px;
           border-radius: 50%;
+          border: 1px solid rgba(255, 255, 255, 0.2);
         }
 
         .user-nickname{
           position: relative;
-          left: 5px;
-          bottom: 10px;
-          font-size: 14px;
-          font-weight: bold;
+          left: 0;
+          bottom: 0;
+          font-size: 13px;
+          font-weight: 600;
+          color: #fff;
         }
 
         i {

gear-ui3/src/layout/components/Sidebar/Logo.vue

@@ -35,7 +35,7 @@ const getLogoBackground = computed(() => {
   if (settingsStore.isDark) {
     return 'var(--sidebar-bg)'
   }
-  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
+  return '#1c2b3a'
 })
 
 // 获取Logo文字颜色
@@ -43,7 +43,7 @@ const getLogoTextColor = computed(() => {
   if (settingsStore.isDark) {
     return 'var(--sidebar-text)'
   }
-  return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
+  return '#fff'
 })
 </script>
 

gear-ui3/src/layout/components/Sidebar/index.vue

@@ -70,34 +70,45 @@ const activeMenu = computed(() => {
 
 <style lang="scss" scoped>
 .sidebar-container {
-  background-color: v-bind(getMenuBackground);
+  background: #1c2b3a !important;
+  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
   
   .scrollbar-wrapper {
-    background-color: v-bind(getMenuBackground);
+    background: #1c2b3a !important;
+  }
+
+  :deep(.el-scrollbar__view),
+  :deep(.el-scrollbar__wrap),
+  :deep(.el-scrollbar__bar),
+  :deep(.el-menu),
+  :deep(.el-menu--popup) {
+    background: #1c2b3a !important;
   }
 
   .el-menu {
     border: none;
     height: 100%;
     width: 100% !important;
+    background: #1c2b3a !important;
     
     .el-menu-item, .el-sub-menu__title {
+      color: #d7e2ee !important;
+
       &:hover {
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+        background-color: rgba(255, 255, 255, 0.05) !important;
       }
     }
 
     .el-menu-item {
-      color: v-bind(getMenuTextColor);
-      
       &.is-active {
-        color: var(--menu-active-text, #409eff);
-        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+        color: #ffffff !important;
+        background: linear-gradient(90deg, rgba(29, 78, 137, 0.92), rgba(36, 113, 163, 0.92)) !important;
+        box-shadow: inset 3px 0 0 #7cc0ff;
       }
     }
 
     .el-sub-menu__title {
-      color: v-bind(getMenuTextColor);
+      color: #d7e2ee !important;
     }
   }
 }

gear-ui3/src/layout/components/TagsView/index.vue

@@ -90,9 +90,9 @@ function isActive(r) {
 function activeStyle(tag) {
   if (!isActive(tag)) return {}
   return {
-    "background-color": "#f5f7fa",
-    "border-color": "#f5f7fa",
-    "color": "#303133"
+    "background-color": "#1d4e89",
+    "border-color": "#1d4e89",
+    "color": "#fff"
   }
 }
 
@@ -264,9 +264,9 @@ function handleScroll() {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: var(--tags-bg, #fff);
-  border-bottom: 1px solid var(--tags-item-border, #d8dce5);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  background: #f5f7fa;
+  border-bottom: 1px solid #dde1e6;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 0 3px 0 rgba(0, 0, 0, .03);
 
   .tags-view-wrapper {
     .tags-view-item {
@@ -275,9 +275,9 @@ function handleScroll() {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid var(--tags-item-border, #d8dce5);
-      color: var(--tags-item-text, #495060);
-      background: var(--tags-item-bg, #fff);
+      border: 1px solid #d8dce5;
+      color: #495060;
+      background: #fff;
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
@@ -292,13 +292,13 @@ function handleScroll() {
       }
 
       &.active {
-        background-color: #f5f7fa;
-        color: #303133;
-        border-color: #f5f7fa;
+        background-color: #1d4e89;
+        color: #fff;
+        border-color: #1d4e89;
 
         &::before {
           content: '';
-          background: #42b983;
+          background: #7cc0ff;
           display: inline-block;
           width: 8px;
           height: 8px;
@@ -316,7 +316,7 @@ function handleScroll() {
 
   .contextmenu {
     margin: 0;
-    background: var(--el-bg-color-overlay, #fff);
+    background: #fff;
     z-index: 3000;
     position: absolute;
     list-style-type: none;
@@ -324,7 +324,7 @@ function handleScroll() {
     border-radius: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: var(--tags-item-text, #333);
+    color: #333;
     box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
     border: 1px solid var(--el-border-color-light, #e4e7ed);
 
@@ -334,7 +334,7 @@ function handleScroll() {
       cursor: pointer;
 
       &:hover {
-        background: var(--tags-item-hover, #eee);
+        background: #eef3f8;
       }
     }
   }