From 89e2eb66ecfb11695cfc0c085f6444871478debd Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 09:17:16 +0800 Subject: [PATCH 1/9] =?UTF-8?q?style(components):=20=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 面包屑组件引入变量样式并优化悬停效果 - 汉堡菜单按钮应用主题颜色和过渡动画 - 导航栏背景改为渐变色并调整阴影效果 - 用户头像添加边框和悬停高亮效果 - 下拉箭头图标应用主题颜色并增加交互反馈 - 所有组件统一使用主题变量替换硬编码颜色值 --- .../src/components/Breadcrumb/index.vue | 25 ++++++++++++- .../src/components/Hamburger/index.vue | 12 ++++++- .../src/layout/components/Navbar.vue | 35 +++++++++++++++---- 3 files changed, 63 insertions(+), 9 deletions(-) diff --git a/cutejava-front/src/components/Breadcrumb/index.vue b/cutejava-front/src/components/Breadcrumb/index.vue index 0f47a93e..a1f269b8 100644 --- a/cutejava-front/src/components/Breadcrumb/index.vue +++ b/cutejava-front/src/components/Breadcrumb/index.vue @@ -70,15 +70,38 @@ export default { diff --git a/cutejava-front/src/components/Hamburger/index.vue b/cutejava-front/src/components/Hamburger/index.vue index 8c772469..2f944d4a 100644 --- a/cutejava-front/src/components/Hamburger/index.vue +++ b/cutejava-front/src/components/Hamburger/index.vue @@ -32,15 +32,25 @@ export default { } - diff --git a/cutejava-front/src/layout/components/Navbar.vue b/cutejava-front/src/layout/components/Navbar.vue index 828ad9bd..f0544e5f 100644 --- a/cutejava-front/src/layout/components/Navbar.vue +++ b/cutejava-front/src/layout/components/Navbar.vue @@ -114,19 +114,25 @@ export default { height: 50px; overflow: hidden; position: relative; - background: #fff; - box-shadow: 0 1px 4px rgba(0,21,41,.08); + 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); .hamburger-container { line-height: 46px; height: 100%; float: left; cursor: pointer; - transition: background .3s; + transition: all 0.3s ease; -webkit-tap-highlight-color:transparent; &:hover { - background: rgba(0, 0, 0, .025) + background: rgba(74, 144, 226, 0.1); + + .hamburger { + color: $menuActiveText; + filter: drop-shadow(0 0 6px $menuActiveText); + } } } @@ -153,15 +159,17 @@ export default { padding: 0 8px; height: 100%; font-size: 18px; - color: #5a5e66; + color: $menuText; vertical-align: text-bottom; &.hover-effect { cursor: pointer; - transition: background .3s; + transition: all 0.3s ease; &:hover { - background: rgba(0, 0, 0, .025) + background: rgba(74, 144, 226, 0.1); + color: $menuActiveText; + filter: drop-shadow(0 0 8px rgba(102, 255, 204, 0.3)); } } } @@ -178,6 +186,13 @@ export default { width: 40px; height: 40px; border-radius: 10px; + border: 2px solid rgba(102, 255, 204, 0.3); + transition: all 0.3s ease; + + &:hover { + border-color: $menuActiveText; + box-shadow: 0 0 15px rgba(102, 255, 204, 0.4); + } } .el-icon-caret-bottom { @@ -186,6 +201,12 @@ export default { right: -20px; top: 25px; font-size: 12px; + color: $menuText; + transition: all 0.3s ease; + + &:hover { + color: $menuActiveText; + } } } } From 32619cd13811334ab1ce95e70809775b8f00a0a9 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 09:23:18 +0800 Subject: [PATCH 2/9] =?UTF-8?q?style(Breadcrumb):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=BB=A5=E5=A2=9E=E5=BC=BA=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 导入新的技术变量文件 variables.technology3 - 将面包屑文字颜色统一设置为白色并增加重要性标记 - 为链接状态添加发光阴影效果和悬停滤镜 - 调整分隔符颜色透明度以改善可读性 - 为非重定向项目添加文本阴影效果 - 优化悬停状态的颜色过渡和阴影效果 --- .../src/components/Breadcrumb/index.vue | 36 ++++++++++++++----- 1 file changed, 28 insertions(+), 8 deletions(-) diff --git a/cutejava-front/src/components/Breadcrumb/index.vue b/cutejava-front/src/components/Breadcrumb/index.vue index a1f269b8..bbfcee96 100644 --- a/cutejava-front/src/components/Breadcrumb/index.vue +++ b/cutejava-front/src/components/Breadcrumb/index.vue @@ -71,6 +71,7 @@ export default { From 77abc7b0e28b2dc1738d5d9f1480a9d93aa82049 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 09:29:14 +0800 Subject: [PATCH 3/9] =?UTF-8?q?style(styles):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E9=9D=A2=E5=8C=85=E5=B1=91=E6=B1=89?= =?UTF-8?q?=E5=A0=A1=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E5=B9=B6=E5=BA=94=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 variables.technology3.scss 中添加 Navbar 顶部导航栏样式变量 - 在 variables.technology3.scss 中添加 Hamburger 汉堡菜单按钮样式变量 - 在 variables.technology3.scss 中添加 Breadcrumb 面包屑导航样式变量 - 在 Breadcrumb 组件中应用新的面包屑样式变量 - 在 Hamburger 组件中应用新的汉堡菜单样式变量 - 在 Navbar 组件中应用新的导航栏样式变量 - 移除 Breadcrumb 组件中对 variables.technology3 的重复导入 --- .../assets/styles/variables.technology3.scss | 66 +++++++++++++++++++ .../src/components/Breadcrumb/index.vue | 29 ++++---- .../src/components/Hamburger/index.vue | 8 +-- .../src/layout/components/Navbar.vue | 24 +++---- 4 files changed, 96 insertions(+), 31 deletions(-) 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 { 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; } 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 { From 34a3a39fea6bce05fc2aa20c478bdf7280207880 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 09:32:38 +0800 Subject: [PATCH 4/9] =?UTF-8?q?style(styles):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=92=8C=E9=9D=A2?= =?UTF-8?q?=E5=8C=85=E5=B1=91=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 为profession主题添加navbar、hamburger和breadcrumb相关样式变量 - 为technology4主题添加navbar、hamburger和breadcrumb相关样式变量 - 为technology5主题添加navbar、hamburger和breadcrumb相关样式变量 - 更新variables.scss引用从technology3切换到technology5 - 统一顶部导航栏背景渐变、阴影、悬停效果等样式定义 - 标准化面包屑导航文字颜色、链接颜色和悬停效果配置 --- .../assets/styles/variables.profession.scss | 66 ++++++++++++++++++ .../src/assets/styles/variables.scss | 2 +- .../assets/styles/variables.technology4.scss | 66 ++++++++++++++++++ .../assets/styles/variables.technology5.scss | 68 ++++++++++++++++++- 4 files changed, 200 insertions(+), 2 deletions(-) diff --git a/cutejava-front/src/assets/styles/variables.profession.scss b/cutejava-front/src/assets/styles/variables.profession.scss index 2069499d..0dcd31e5 100644 --- a/cutejava-front/src/assets/styles/variables.profession.scss +++ b/cutejava-front/src/assets/styles/variables.profession.scss @@ -21,6 +21,71 @@ $subMenuHover: #2D5BA6; // 左侧菜单栏宽度 $sideBarWidth: 250px; +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色） +$navbarBgStart: $menuBg; +$navbarBgEnd: #1A3055; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(58, 113, 168, 0.2); +$navbarShadowY: 2px; +$navbarShadowBlur: 8px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(90, 155, 219, 0.3); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(90, 155, 219, 0.15); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: $menuText; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(90, 155, 219, 0.3); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(90, 155, 219, 0.3); +$navbarAvatarHoverBorderColor: $light-blue; +$navbarAvatarHoverGlow: rgba(90, 155, 219, 0.4); + +// 下拉箭头颜色 +$navbarCaretColor: $menuText; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: $menuText; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 6px rgba(90, 155, 219, 0.3); + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #F0F4F8; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #F0F4F8; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: rgba(90, 155, 219, 0.2); + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $light-blue; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: 0 0 6px rgba(90, 155, 219, 0.3); + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(90, 155, 219, 0.4); + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #F5F8FC; + // 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/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss index 376d5718..88112e17 100644 --- a/cutejava-front/src/assets/styles/variables.scss +++ b/cutejava-front/src/assets/styles/variables.scss @@ -1 +1 @@ -@import 'variables.technology3'; +@import 'variables.technology5'; diff --git a/cutejava-front/src/assets/styles/variables.technology4.scss b/cutejava-front/src/assets/styles/variables.technology4.scss index 76379d3d..4b8155f1 100644 --- a/cutejava-front/src/assets/styles/variables.technology4.scss +++ b/cutejava-front/src/assets/styles/variables.technology4.scss @@ -21,6 +21,71 @@ $subMenuHover: #1E3A8A; // 左侧菜单栏宽度 $sideBarWidth: 250px; +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝紫色） +$navbarBgStart: $menuBg; +$navbarBgEnd: #0D1422; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(79, 195, 247, 0.15); +$navbarShadowY: 2px; +$navbarShadowBlur: 8px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(79, 195, 247, 0.2); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(79, 195, 247, 0.1); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: $menuText; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(79, 195, 247, 0.3); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(79, 195, 247, 0.3); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(79, 195, 247, 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(79, 195, 247, 0.2); + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: 0 0 6px rgba(79, 195, 247, 0.4); + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(79, 195, 247, 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/assets/styles/variables.technology5.scss b/cutejava-front/src/assets/styles/variables.technology5.scss index 47515f36..d1808b86 100644 --- a/cutejava-front/src/assets/styles/variables.technology5.scss +++ b/cutejava-front/src/assets/styles/variables.technology5.scss @@ -21,8 +21,73 @@ $subMenuHover: #393E7C; // 左侧菜单栏宽度 $sideBarWidth: 250px; +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从侧边栏颜色过渡到深紫色） +$navbarBgStart: $menuBg; +$navbarBgEnd: #141426; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(0, 229, 255, 0.15); +$navbarShadowY: 2px; +$navbarShadowBlur: 8px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(0, 229, 255, 0.2); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(0, 229, 255, 0.1); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: $menuText; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(0, 229, 255, 0.3); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(0, 229, 255, 0.3); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(0, 229, 255, 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(0, 229, 255, 0.2); + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: 0 0 6px rgba(0, 229, 255, 0.4); + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(0, 229, 255, 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 +// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass :export { menuText: $menuText; menuActiveText: $menuActiveText; @@ -33,3 +98,4 @@ $sideBarWidth: 250px; subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; } + From 17d812cba98ad85526c6fd7b9624d6d83159d371 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 09:39:14 +0800 Subject: [PATCH 5/9] =?UTF-8?q?feat(styles):=20=E6=9B=B4=E6=96=B0=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将默认主题从 technology5 替换为 solarflare 主题 - 新增 arcticaurora 主题样式变量文件 - 新增 solarflare 主题样式变量文件，包含全新的配色方案 - 更新导航栏、侧边栏、面包屑等组件的样式变量 - 添加新的颜色配置和渐变效果支持 --- .../assets/styles/variables.arcticaurora.scss | 100 ++++++++++++++++++ .../src/assets/styles/variables.scss | 2 +- .../assets/styles/variables.solarflare.scss | 100 ++++++++++++++++++ 3 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 cutejava-front/src/assets/styles/variables.arcticaurora.scss create mode 100644 cutejava-front/src/assets/styles/variables.solarflare.scss diff --git a/cutejava-front/src/assets/styles/variables.arcticaurora.scss b/cutejava-front/src/assets/styles/variables.arcticaurora.scss new file mode 100644 index 00000000..5baacdbe --- /dev/null +++ b/cutejava-front/src/assets/styles/variables.arcticaurora.scss @@ -0,0 +1,100 @@ +// 科技现代：极光幻境（梦幻唯美） +// base color +$blue: #6C5CE7; +$light-blue: #A29BFE; +$red: #FF7675; +$pink: #FD79A8; +$green: #00B894; +$tiffany: #81ECEC; +$yellow: #FFEAA7; +$panGreen: #00B894; + +// sidebar +$menuText: #B2BEC3; +$menuActiveText: #A29BFE; +$subMenuActiveText: #FFFFFF; +$menuBg: #0F0F1F; +$menuHover: #1A1A35; +$subMenuBg: #14142A; +$subMenuHover: #2C2C5A; + +// 左侧菜单栏宽度 +$sideBarWidth: 250px; + +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从深靛蓝过渡到深紫蓝色） +$navbarBgStart: $menuBg; +$navbarBgEnd: #0A0A18; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(162, 155, 254, 0.18); +$navbarShadowY: 2px; +$navbarShadowBlur: 8px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(162, 155, 254, 0.25); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(162, 155, 254, 0.1); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: $menuText; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(162, 155, 254, 0.32); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(162, 155, 254, 0.3); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(162, 155, 254, 0.42); + +// 下拉箭头颜色 +$navbarCaretColor: $menuText; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: $menuText; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 6px rgba(162, 155, 254, 0.45); + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #F0F1F8; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #F0F1F8; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: rgba(162, 155, 254, 0.18); + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: 0 0 6px rgba(162, 155, 254, 0.4); + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(129, 236, 236, 0.55); + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #F7F8FC; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/cutejava-front/src/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss index 88112e17..7653d280 100644 --- a/cutejava-front/src/assets/styles/variables.scss +++ b/cutejava-front/src/assets/styles/variables.scss @@ -1 +1 @@ -@import 'variables.technology5'; +@import 'variables.solarflare'; diff --git a/cutejava-front/src/assets/styles/variables.solarflare.scss b/cutejava-front/src/assets/styles/variables.solarflare.scss new file mode 100644 index 00000000..d6d7391d --- /dev/null +++ b/cutejava-front/src/assets/styles/variables.solarflare.scss @@ -0,0 +1,100 @@ +// 科技现代：太阳耀斑（热烈活力） +// base color +$blue: #FF6B35; +$light-blue: #FF8C42; +$red: #E84C5B; +$pink: #FF7B9C; +$green: #FFC857; +$tiffany: #FF9F45; +$yellow: #FFD93D; +$panGreen: #FFC857; + +// sidebar +$menuText: #D4A574; +$menuActiveText: #FF8C42; +$subMenuActiveText: #FFFFFF; +$menuBg: #1A1512; +$menuHover: #2A221D; +$subMenuBg: #221E1A; +$subMenuHover: #3D332C; + +// 左侧菜单栏宽度 +$sideBarWidth: 250px; + +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从深棕色过渡到炭黑色） +$navbarBgStart: $menuBg; +$navbarBgEnd: #15100D; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(255, 140, 66, 0.2); +$navbarShadowY: 2px; +$navbarShadowBlur: 8px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(255, 140, 66, 0.25); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(255, 140, 66, 0.1); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: $menuText; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(255, 140, 66, 0.3); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(255, 140, 66, 0.3); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(255, 140, 66, 0.45); + +// 下拉箭头颜色 +$navbarCaretColor: $menuText; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: $menuText; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 6px rgba(255, 140, 66, 0.4); + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #FDF6EC; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #FDF6EC; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: rgba(255, 140, 66, 0.15); + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: 0 0 6px rgba(255, 140, 66, 0.35); + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(255, 159, 69, 0.5); + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #FFF9F0; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} From 833a5153534712a84968e23dd4d240f0f6954d36 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 09:49:59 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat(styles):=20=E6=9B=B4=E6=8D=A2=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E6=A0=B7=E5=BC=8F=E4=B8=BA=E4=BA=91=E5=A4=A9=E4=B8=BB?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将默认样式主题从 solarflare 替换为 cloudsky - 新增 cloudsky、mint、oceanbreeze 三个主题样式文件 - 更新基础色彩变量包括蓝色、红色、绿色等配色方案 - 调整侧边栏菜单颜色、导航栏背景及阴影效果 - 优化面包屑导航、汉堡菜单按钮等组件样式变量 - 添加主题变量的 webpack 导出配置支持 --- .../src/assets/styles/variables.cloudsky.scss | 100 ++++++++++++++++++ .../src/assets/styles/variables.mint.scss | 100 ++++++++++++++++++ .../assets/styles/variables.oceanbreeze.scss | 100 ++++++++++++++++++ .../src/assets/styles/variables.scss | 2 +- 4 files changed, 301 insertions(+), 1 deletion(-) create mode 100644 cutejava-front/src/assets/styles/variables.cloudsky.scss create mode 100644 cutejava-front/src/assets/styles/variables.mint.scss create mode 100644 cutejava-front/src/assets/styles/variables.oceanbreeze.scss diff --git a/cutejava-front/src/assets/styles/variables.cloudsky.scss b/cutejava-front/src/assets/styles/variables.cloudsky.scss new file mode 100644 index 00000000..7fcc5b01 --- /dev/null +++ b/cutejava-front/src/assets/styles/variables.cloudsky.scss @@ -0,0 +1,100 @@ +// 清新明亮：天空云朵（清新舒适） +// base color +$blue: #5BA3F0; +$light-blue: #7BC4FF; +$red: #FF6B8A; +$pink: #FF8FA8; +$green: #6BCB77; +$tiffany: #7FD1AE; +$yellow: #FFD93D; +$panGreen: #6BCB77; + +// sidebar +$menuText: #2A3A4A; +$menuActiveText: #2B7BD9; +$subMenuActiveText: #2B7BD9; +$menuBg: #FFFFFF; +$menuHover: #F0F5FF; +$subMenuBg: #F8FAFC; +$subMenuHover: #E1E8F5; + +// 左侧菜单栏宽度 +$sideBarWidth: 250px; + +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从白色过渡到浅蓝） +$navbarBgStart: #FFFFFF; +$navbarBgEnd: #F5F9FF; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(91, 163, 240, 0.15); +$navbarShadowY: 1px; +$navbarShadowBlur: 4px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(91, 163, 240, 0.2); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: #F0F5FF; + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: #5A6C7D; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(91, 163, 240, 0.2); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(91, 163, 240, 0.25); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(91, 163, 240, 0.3); + +// 下拉箭头颜色 +$navbarCaretColor: #5A6C7D; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: #5A6C7D; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 4px rgba(91, 163, 240, 0.3); + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #3A4A5A; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #3A4A5A; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: transparent; + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: transparent; + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(91, 163, 240, 0.4); + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #2A3A4A; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/cutejava-front/src/assets/styles/variables.mint.scss b/cutejava-front/src/assets/styles/variables.mint.scss new file mode 100644 index 00000000..8192074d --- /dev/null +++ b/cutejava-front/src/assets/styles/variables.mint.scss @@ -0,0 +1,100 @@ +// 清新明亮：薄荷清新（清爽自然） +// base color +$blue: #5F9EA0; +$light-blue: #7DD3C0; +$red: #FF7F7F; +$pink: #FFA8A8; +$green: #95E1D3; +$tiffany: #B8F2E6; +$yellow: #FFEAA7; +$panGreen: #95E1D3; + +// sidebar +$menuText: #3A4A5A; +$menuActiveText: #5F9EA0; +$subMenuActiveText: #5F9EA0; +$menuBg: #FAFEFC; +$menuHover: #F0FAF7; +$subMenuBg: #FCFDFB; +$subMenuHover: #E5F5F0; + +// 左侧菜单栏宽度 +$sideBarWidth: 250px; + +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从白色过渡到淡薄荷色） +$navbarBgStart: #FFFFFF; +$navbarBgEnd: #F5FFFA; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(95, 158, 160, 0.12); +$navbarShadowY: 1px; +$navbarShadowBlur: 4px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(95, 158, 160, 0.15); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: #F0FAF7; + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: #5A6B7A; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(95, 158, 160, 0.2); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(95, 158, 160, 0.25); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(95, 158, 160, 0.3); + +// 下拉箭头颜色 +$navbarCaretColor: #5A6B7A; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: #5A6B7A; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 4px rgba(95, 158, 160, 0.3); + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #3A4A5A; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #3A4A5A; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: transparent; + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: transparent; + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(90, 107, 122, 0.4); + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #2A3A4A; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/cutejava-front/src/assets/styles/variables.oceanbreeze.scss b/cutejava-front/src/assets/styles/variables.oceanbreeze.scss new file mode 100644 index 00000000..27469e15 --- /dev/null +++ b/cutejava-front/src/assets/styles/variables.oceanbreeze.scss @@ -0,0 +1,100 @@ +// 清新明亮：海风浅蓝（宁静舒适） +// base color +$blue: #4A90E2; +$light-blue: #6BB3FF; +$red: #FF7F7F; +$pink: #FFA3A3; +$green: #7DD3C0; +$tiffany: #9CE6DC; +$yellow: #FFEAA7; +$panGreen: #7DD3C0; + +// sidebar +$menuText: #3A4A5A; +$menuActiveText: #4A90E2; +$subMenuActiveText: #4A90E2; +$menuBg: #F5FAFF; +$menuHover: #EBF4FF; +$subMenuBg: #F8FCFF; +$subMenuHover: #D9EBFF; + +// 左侧菜单栏宽度 +$sideBarWidth: 250px; + +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从白色过渡到浅蓝色） +$navbarBgStart: #FFFFFF; +$navbarBgEnd: #F5FAFF; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(74, 144, 226, 0.12); +$navbarShadowY: 1px; +$navbarShadowBlur: 4px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(74, 144, 226, 0.15); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: #EBF4FF; + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: #5A6C7D; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(74, 144, 226, 0.2); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(74, 144, 226, 0.25); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(74, 144, 226, 0.3); + +// 下拉箭头颜色 +$navbarCaretColor: #5A6C7D; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: #5A6C7D; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 4px rgba(74, 144, 226, 0.3); + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #3A4A5A; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #3A4A5A; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: transparent; + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: transparent; + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(90, 108, 125, 0.4); + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #2A3A4A; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/cutejava-front/src/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss index 7653d280..b5ab3709 100644 --- a/cutejava-front/src/assets/styles/variables.scss +++ b/cutejava-front/src/assets/styles/variables.scss @@ -1 +1 @@ -@import 'variables.solarflare'; +@import 'variables.cloudsky'; From 0514bbb8bb1f05d37486bddc5b27dfc562e341e5 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 10:00:12 +0800 Subject: [PATCH 7/9] =?UTF-8?q?move(theme):=20=E7=A7=BB=E5=8A=A8=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=8F=98=E9=87=8F=E6=96=87=E4=BB=B6=E5=88=B0=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E7=9B=AE=E5=BD=95=E5=B9=B6=E6=9B=B4=E6=96=B0=E5=BC=95?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dark}/variables.arcticaurora.scss | 0 .../styles/themes/dark/variables.default.scss | 100 ++++++++++++++++++ .../dark}/variables.profession.scss | 0 .../dark}/variables.solarflare.scss | 0 .../dark}/variables.technology3.scss | 0 .../dark}/variables.technology4.scss | 0 .../dark}/variables.technology5.scss | 0 .../light}/variables.cloudsky.scss | 0 .../{ => themes/light}/variables.mint.scss | 0 .../light}/variables.oceanbreeze.scss | 0 .../src/assets/styles/variables.default.scss | 35 ------ .../src/assets/styles/variables.scss | 2 +- 12 files changed, 101 insertions(+), 36 deletions(-) rename cutejava-front/src/assets/styles/{ => themes/dark}/variables.arcticaurora.scss (100%) create mode 100644 cutejava-front/src/assets/styles/themes/dark/variables.default.scss rename cutejava-front/src/assets/styles/{ => themes/dark}/variables.profession.scss (100%) rename cutejava-front/src/assets/styles/{ => themes/dark}/variables.solarflare.scss (100%) rename cutejava-front/src/assets/styles/{ => themes/dark}/variables.technology3.scss (100%) rename cutejava-front/src/assets/styles/{ => themes/dark}/variables.technology4.scss (100%) rename cutejava-front/src/assets/styles/{ => themes/dark}/variables.technology5.scss (100%) rename cutejava-front/src/assets/styles/{ => themes/light}/variables.cloudsky.scss (100%) rename cutejava-front/src/assets/styles/{ => themes/light}/variables.mint.scss (100%) rename cutejava-front/src/assets/styles/{ => themes/light}/variables.oceanbreeze.scss (100%) delete mode 100644 cutejava-front/src/assets/styles/variables.default.scss diff --git a/cutejava-front/src/assets/styles/variables.arcticaurora.scss b/cutejava-front/src/assets/styles/themes/dark/variables.arcticaurora.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.arcticaurora.scss rename to cutejava-front/src/assets/styles/themes/dark/variables.arcticaurora.scss diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.default.scss b/cutejava-front/src/assets/styles/themes/dark/variables.default.scss new file mode 100644 index 00000000..5f94e67a --- /dev/null +++ b/cutejava-front/src/assets/styles/themes/dark/variables.default.scss @@ -0,0 +1,100 @@ +// 默认风格 +// base color +$blue: #324157; +$light-blue: #3A71A8; +$red: #C03639; +$pink: #E65D6E; +$green: #30B08F; +$tiffany: #4AB7BD; +$yellow: #FEC171; +$panGreen: #30B08F; + +// sidebar 默认 +$menuText: #bfcbd9; +$menuActiveText: #409EFF; +$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951 +$menuBg: #304156; +$menuHover: #263445; +$subMenuBg: #1f2d3d; +$subMenuHover: #001528; + +// 左侧菜单栏宽度 +$sideBarWidth: 250px; + +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色） +$navbarBgStart: $menuBg; +$navbarBgEnd: #263445; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(0, 21, 41, 0.15); +$navbarShadowY: 1px; +$navbarShadowBlur: 4px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(0, 21, 41, 0.2); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(0, 0, 0, 0.025); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: #5a5e66; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: transparent; + +// 头像边框颜色 +$navbarAvatarBorderColor: transparent; +$navbarAvatarHoverBorderColor: transparent; +$navbarAvatarHoverGlow: transparent; + +// 下拉箭头颜色 +$navbarCaretColor: #5a5e66; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: $menuText; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: transparent; + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #97a8be; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #97a8be; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: transparent; + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: transparent; + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: #97a8be; + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #97a8be; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between/js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/cutejava-front/src/assets/styles/variables.profession.scss b/cutejava-front/src/assets/styles/themes/dark/variables.profession.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.profession.scss rename to cutejava-front/src/assets/styles/themes/dark/variables.profession.scss diff --git a/cutejava-front/src/assets/styles/variables.solarflare.scss b/cutejava-front/src/assets/styles/themes/dark/variables.solarflare.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.solarflare.scss rename to cutejava-front/src/assets/styles/themes/dark/variables.solarflare.scss diff --git a/cutejava-front/src/assets/styles/variables.technology3.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology3.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.technology3.scss rename to cutejava-front/src/assets/styles/themes/dark/variables.technology3.scss diff --git a/cutejava-front/src/assets/styles/variables.technology4.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology4.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.technology4.scss rename to cutejava-front/src/assets/styles/themes/dark/variables.technology4.scss diff --git a/cutejava-front/src/assets/styles/variables.technology5.scss b/cutejava-front/src/assets/styles/themes/dark/variables.technology5.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.technology5.scss rename to cutejava-front/src/assets/styles/themes/dark/variables.technology5.scss diff --git a/cutejava-front/src/assets/styles/variables.cloudsky.scss b/cutejava-front/src/assets/styles/themes/light/variables.cloudsky.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.cloudsky.scss rename to cutejava-front/src/assets/styles/themes/light/variables.cloudsky.scss diff --git a/cutejava-front/src/assets/styles/variables.mint.scss b/cutejava-front/src/assets/styles/themes/light/variables.mint.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.mint.scss rename to cutejava-front/src/assets/styles/themes/light/variables.mint.scss diff --git a/cutejava-front/src/assets/styles/variables.oceanbreeze.scss b/cutejava-front/src/assets/styles/themes/light/variables.oceanbreeze.scss similarity index 100% rename from cutejava-front/src/assets/styles/variables.oceanbreeze.scss rename to cutejava-front/src/assets/styles/themes/light/variables.oceanbreeze.scss diff --git a/cutejava-front/src/assets/styles/variables.default.scss b/cutejava-front/src/assets/styles/variables.default.scss deleted file mode 100644 index ff2de1c5..00000000 --- a/cutejava-front/src/assets/styles/variables.default.scss +++ /dev/null @@ -1,35 +0,0 @@ -// 默认风格 -// base color -$blue: #324157; -$light-blue: #3A71A8; -$red: #C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow: #FEC171; -$panGreen: #30B08F; - -// sidebar 默认 -$menuText: #bfcbd9; -$menuActiveText: #409EFF; -$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951 -$menuBg: #304156; -$menuHover: #263445; -$subMenuBg: #1f2d3d; -$subMenuHover: #001528; - -// 左侧菜单栏宽度 -$sideBarWidth: 250px; - -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass -:export { - menuText: $menuText; - menuActiveText: $menuActiveText; - subMenuActiveText: $subMenuActiveText; - menuBg: $menuBg; - menuHover: $menuHover; - subMenuBg: $subMenuBg; - subMenuHover: $subMenuHover; - sideBarWidth: $sideBarWidth; -} diff --git a/cutejava-front/src/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss index b5ab3709..cb693ef8 100644 --- a/cutejava-front/src/assets/styles/variables.scss +++ b/cutejava-front/src/assets/styles/variables.scss @@ -1 +1 @@ -@import 'variables.cloudsky'; +@import 'themes/light/variables.oceanbreeze'; From df841d64a2cb37b90e0cb14359b0934871f4b403 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 10:10:03 +0800 Subject: [PATCH 8/9] =?UTF-8?q?style(theme):=20=E6=96=B0=E5=A2=9E=E4=B8=BB?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../themes/dark/variables.cyberorange.scss | 100 ++++++++++++++++++ .../src/assets/styles/variables.scss | 2 +- 2 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 cutejava-front/src/assets/styles/themes/dark/variables.cyberorange.scss diff --git a/cutejava-front/src/assets/styles/themes/dark/variables.cyberorange.scss b/cutejava-front/src/assets/styles/themes/dark/variables.cyberorange.scss new file mode 100644 index 00000000..05b129cd --- /dev/null +++ b/cutejava-front/src/assets/styles/themes/dark/variables.cyberorange.scss @@ -0,0 +1,100 @@ +// 赛博橙（热情奔放） +// base color +$blue: #FF5722; +$light-blue: #FF7043; +$red: #FF1744; +$pink: #FF4081; +$green: #00E676; +$tiffany: #69F0AE; +$yellow: #FFD600; +$panGreen: #00E676; + +// sidebar +$menuText: #FFCCBC; +$menuActiveText: #FF6D00; +$subMenuActiveText: #FFFFFF; +$menuBg: #261411; +$menuHover: #3D1F1A; +$subMenuBg: #1E0D0B; +$subMenuHover: #502620; + +// 左侧菜单栏宽度 +$sideBarWidth: 250px; + +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色 +$navbarBgStart: $menuBg; +$navbarBgEnd: #1A0E0C; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(255, 109, 0, 0.25); +$navbarShadowY: 2px; +$navbarShadowBlur: 8px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(255, 109, 0, 0.35); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(255, 109, 0, 0.12); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: #FFD0BC; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(255, 109, 0, 0.4); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(255, 109, 0, 0.4); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(255, 109, 0, 0.5); + +// 下拉箭头颜色 +$navbarCaretColor: #FFCCBC; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: #FFCCBC; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 8px rgba(255, 109, 0, 0.5); + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #FFFFFF; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #FFFFFF; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: rgba(255, 109, 0, 0.18); + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: 0 0 8px rgba(255, 109, 0, 0.5); + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(255, 64, 129, 0.6); + +// 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 { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/cutejava-front/src/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss index cb693ef8..5eebff7b 100644 --- a/cutejava-front/src/assets/styles/variables.scss +++ b/cutejava-front/src/assets/styles/variables.scss @@ -1 +1 @@ -@import 'themes/light/variables.oceanbreeze'; +@import 'themes/dark/variables.cyberorange'; From 44fa37eac3035d0505b58728cf999e72b7c957d6 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 10:16:26 +0800 Subject: [PATCH 9/9] =?UTF-8?q?feat(role):=20=E6=B7=BB=E5=8A=A0=E8=A7=92?= =?UTF-8?q?=E8=89=B2=E8=8F=9C=E5=8D=95=E6=9D=83=E9=99=90=E5=88=86=E9=85=8D?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 后端新增 listRoleMenuByPid 接口用于获取角色菜单权限 - 前端新增 listRoleMenuByPid API 方法调用接口 - 修改角色页面布局，调整菜单授权区域宽度为6列 - 角色页面导入 listRoleMenuByPid 方法替换原有的 listMenuByPid - 更新树形菜单数据加载方法，使用新的角色菜单权限接口 - 更改前端主题变量从 cyberorange 暗色主题为 cloudsky 亮色主题 --- cutejava-front/src/api/system/menu.js | 7 +++++++ cutejava-front/src/assets/styles/variables.scss | 2 +- cutejava-front/src/views/system/role/index.vue | 8 ++++---- .../cn/odboy/system/controller/SystemMenuController.java | 8 ++++++++ 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/cutejava-front/src/api/system/menu.js b/cutejava-front/src/api/system/menu.js index 8a888e68..7de9fdae 100644 --- a/cutejava-front/src/api/system/menu.js +++ b/cutejava-front/src/api/system/menu.js @@ -34,6 +34,13 @@ export function listMenuByPid(pid) { }) } +export function listRoleMenuByPid(pid) { + return request({ + url: 'api/menu/listRoleMenuByPid?pid=' + pid, + method: 'post' + }) +} + export function searchMenu(params) { return request({ url: 'api/menu/searchMenu', diff --git a/cutejava-front/src/assets/styles/variables.scss b/cutejava-front/src/assets/styles/variables.scss index 5eebff7b..66b3e056 100644 --- a/cutejava-front/src/assets/styles/variables.scss +++ b/cutejava-front/src/assets/styles/variables.scss @@ -1 +1 @@ -@import 'themes/dark/variables.cyberorange'; +@import 'themes/light/variables.cloudsky'; diff --git a/cutejava-front/src/views/system/role/index.vue b/cutejava-front/src/views/system/role/index.vue index 5fcca48f..044b2c3c 100644 --- a/cutejava-front/src/views/system/role/index.vue +++ b/cutejava-front/src/views/system/role/index.vue @@ -68,7 +68,7 @@ - +
角色列表 @@ -113,7 +113,7 @@ - +
@@ -153,7 +153,7 @@