diff --git a/cutejava-front/src/assets/styles/variables.technology3.scss b/cutejava-front/src/assets/styles/variables.technology3.scss
index d3285335..69e790ba 100644
--- a/cutejava-front/src/assets/styles/variables.technology3.scss
+++ b/cutejava-front/src/assets/styles/variables.technology3.scss
@@ -21,6 +21,71 @@ $subMenuHover: #2A3B5C;
 // 左侧菜单栏宽度
 $sideBarWidth: 250px;
 
+// ===== Navbar 顶部导航栏样式变量 =====
+// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色）
+$navbarBgStart: $menuBg;
+$navbarBgEnd: #162035;
+
+// Navbar 阴影颜色和透明度
+$navbarShadowColor: rgba(74, 144, 226, 0.15);
+$navbarShadowY: 2px;
+$navbarShadowBlur: 8px;
+$navbarShadowSpread: 0px;
+
+// Navbar 底部边框颜色和透明度
+$navbarBorderColor: rgba(74, 144, 226, 0.2);
+$navbarBorderWidth: 1px;
+
+// Navbar 悬停背景色（hamburger 和右侧菜单项）
+$navbarHoverBg: rgba(74, 144, 226, 0.1);
+
+// 右侧菜单项文字颜色
+$navbarRightMenuColor: $menuText;
+
+// 右侧菜单项悬停效果颜色
+$navbarRightMenuHoverColor: $menuActiveText;
+$navbarRightMenuHoverGlow: rgba(102, 255, 204, 0.3);
+
+// 头像边框颜色
+$navbarAvatarBorderColor: rgba(102, 255, 204, 0.3);
+$navbarAvatarHoverBorderColor: $menuActiveText;
+$navbarAvatarHoverGlow: rgba(102, 255, 204, 0.4);
+
+// 下拉箭头颜色
+$navbarCaretColor: $menuText;
+
+// ===== Hamburger 汉堡菜单按钮样式变量 =====
+// Hamburger 默认颜色
+$hamburgerColor: $menuText;
+
+// Hamburger 激活状态颜色
+$hamburgerActiveColor: $menuActiveText;
+
+// Hamburger 发光效果
+$hamburgerGlow: 0 0 6px $menuActiveText;
+
+// ===== Breadcrumb 面包屑导航样式变量 =====
+// Breadcrumb 文字颜色
+$breadcrumbTextColor: #FFFFFF;
+
+// Breadcrumb 链接颜色（可点击项）
+$breadcrumbLinkColor: #FFFFFF;
+
+// Breadcrumb 发光效果
+$breadcrumbTextGlow: rgba(102, 255, 204, 0.3);
+
+// Breadcrumb 悬停颜色
+$breadcrumbHoverColor: $menuActiveText;
+
+// Breadcrumb 悬停发光效果
+$breadcrumbHoverGlow: 0 0 6px rgba(102, 255, 204, 0.4);
+
+// Breadcrumb 分隔符颜色
+$breadcrumbSeparatorColor: rgba(102, 255, 204, 0.5);
+
+// Breadcrumb 当前页面文字颜色（不可点击项）
+$breadcrumbNoRedirectColor: #FFFFFF;
+
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
@@ -33,3 +98,4 @@ $sideBarWidth: 250px;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
 }
+
diff --git a/cutejava-front/src/components/Breadcrumb/index.vue b/cutejava-front/src/components/Breadcrumb/index.vue
index bbfcee96..c0de9a01 100644
--- a/cutejava-front/src/components/Breadcrumb/index.vue
+++ b/cutejava-front/src/components/Breadcrumb/index.vue
@@ -71,7 +71,6 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/assets/styles/variables";
-@import "~@/assets/styles/variables.technology3";
 
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
@@ -81,47 +80,47 @@ export default {
 
   ::v-deep .el-breadcrumb__item {
     .el-breadcrumb__inner {
-      color: #FFFFFF !important;
+      color: $breadcrumbTextColor !important;
       font-weight: 500;
       transition: all 0.3s ease;
 
       &.is-link {
-        color: #FFFFFF !important;
-        text-shadow: 0 0 4px rgba(102, 255, 204, 0.3);
+        color: $breadcrumbLinkColor !important;
+        text-shadow: 0 0 4px $breadcrumbTextGlow;
 
         &:hover {
-          color: $menuActiveText !important;
-          filter: drop-shadow(0 0 6px rgba(102, 255, 204, 0.4));
+          color: $breadcrumbHoverColor !important;
+          filter: drop-shadow($breadcrumbHoverGlow);
         }
       }
 
       &:hover {
-        color: $menuActiveText !important;
-        filter: drop-shadow(0 0 6px rgba(102, 255, 204, 0.4));
+        color: $breadcrumbHoverColor !important;
+        filter: drop-shadow($breadcrumbHoverGlow);
       }
     }
 
     .el-breadcrumb__separator {
-      color: rgba(102, 255, 204, 0.5);
+      color: $breadcrumbSeparatorColor;
     }
   }
 
   a {
-    color: #FFFFFF !important;
+    color: $breadcrumbLinkColor !important;
     font-weight: 500;
-    text-shadow: 0 0 4px rgba(102, 255, 204, 0.3);
+    text-shadow: 0 0 4px $breadcrumbTextGlow;
 
     &:hover {
-      color: $menuActiveText !important;
-      filter: drop-shadow(0 0 6px rgba(102, 255, 204, 0.4));
+      color: $breadcrumbHoverColor !important;
+      filter: drop-shadow($breadcrumbHoverGlow);
     }
   }
 
   .no-redirect {
-    color: #FFFFFF !important;
+    color: $breadcrumbNoRedirectColor !important;
     cursor: text;
     font-weight: 500;
-    text-shadow: 0 0 4px rgba(102, 255, 204, 0.3);
+    text-shadow: 0 0 4px $breadcrumbTextGlow;
   }
 }
 </style>
diff --git a/cutejava-front/src/components/Hamburger/index.vue b/cutejava-front/src/components/Hamburger/index.vue
index 2f944d4a..d88021d8 100644
--- a/cutejava-front/src/components/Hamburger/index.vue
+++ b/cutejava-front/src/components/Hamburger/index.vue
@@ -40,17 +40,17 @@ export default {
   vertical-align: middle;
   width: 20px;
   height: 20px;
-  fill: $menuText;
+  fill: $hamburgerColor;
   transition: all 0.3s ease;
 }
 
 .hamburger.is-active {
   transform: rotate(180deg);
-  fill: $menuActiveText;
-  filter: drop-shadow(0 0 6px $menuActiveText);
+  fill: $hamburgerActiveColor;
+  filter: drop-shadow($hamburgerGlow);
 }
 
 .hamburger:hover {
-  fill: $menuActiveText;
+  fill: $hamburgerActiveColor;
 }
 </style>
diff --git a/cutejava-front/src/layout/components/Navbar.vue b/cutejava-front/src/layout/components/Navbar.vue
index f0544e5f..db6e12c5 100644
--- a/cutejava-front/src/layout/components/Navbar.vue
+++ b/cutejava-front/src/layout/components/Navbar.vue
@@ -114,9 +114,9 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: linear-gradient(90deg, $menuBg 0%, #162035 100%);
-  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
-  border-bottom: 1px solid rgba(74, 144, 226, 0.2);
+  background: linear-gradient(90deg, $navbarBgStart 0%, $navbarBgEnd 100%);
+  box-shadow: 0 $navbarShadowY $navbarShadowBlur $navbarShadowSpread $navbarShadowColor;
+  border-bottom: $navbarBorderWidth solid $navbarBorderColor;
 
   .hamburger-container {
     line-height: 46px;
@@ -127,11 +127,11 @@ export default {
     -webkit-tap-highlight-color:transparent;
 
     &:hover {
-      background: rgba(74, 144, 226, 0.1);
+      background: $navbarHoverBg;
 
       .hamburger {
         color: $menuActiveText;
-        filter: drop-shadow(0 0 6px $menuActiveText);
+        filter: drop-shadow($hamburgerGlow);
       }
     }
   }
@@ -167,9 +167,9 @@ export default {
         transition: all 0.3s ease;
 
         &:hover {
-          background: rgba(74, 144, 226, 0.1);
-          color: $menuActiveText;
-          filter: drop-shadow(0 0 8px rgba(102, 255, 204, 0.3));
+          background: $navbarHoverBg;
+          color: $navbarRightMenuHoverColor;
+          filter: drop-shadow(0 0 8px $navbarRightMenuHoverGlow);
         }
       }
     }
@@ -186,12 +186,12 @@ export default {
           width: 40px;
           height: 40px;
           border-radius: 10px;
-          border: 2px solid rgba(102, 255, 204, 0.3);
+          border: 2px solid $navbarAvatarBorderColor;
           transition: all 0.3s ease;
 
           &:hover {
-            border-color: $menuActiveText;
-            box-shadow: 0 0 15px rgba(102, 255, 204, 0.4);
+            border-color: $navbarAvatarHoverBorderColor;
+            box-shadow: 0 0 15px $navbarAvatarHoverGlow;
           }
         }
 
@@ -201,7 +201,7 @@ export default {
           right: -20px;
           top: 25px;
           font-size: 12px;
-          color: $menuText;
+          color: $navbarCaretColor;
           transition: all 0.3s ease;
 
           &:hover {