From 2bcfb853b50300d1c5394dcf28f16da252748666 Mon Sep 17 00:00:00 2001 From: ShineKOT <1917095344@qq.com> Date: Thu, 26 Dec 2024 20:17:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E6=A0=8F=E4=B8=BB=E9=A2=98=E6=8E=A7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 + src/common/custom-theme/custom-theme-model.ts | 102 ++++++++++++++---- src/common/custom-theme/custom-theme.scss | 2 +- src/control/app-menu/app-menu.scss | 16 +-- src/locale/en/index.ts | 22 ++-- src/locale/zh-CN/index.ts | 24 +++-- .../panel-app-header/panel-app-header.scss | 42 +++++--- 7 files changed, 146 insertions(+), 66 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 41da621d..6d348775 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ ## [Unreleased] +### Changed + +- 更新导航栏主题控制 + ## [0.7.38-alpha.40] - 2024-12-25 ### Added diff --git a/src/common/custom-theme/custom-theme-model.ts b/src/common/custom-theme/custom-theme-model.ts index b176b3cb..e74c7197 100644 --- a/src/common/custom-theme/custom-theme-model.ts +++ b/src/common/custom-theme/custom-theme-model.ts @@ -368,7 +368,15 @@ export const predefineThemeVars = [ labelLang: 'top', vars: [ { - label: '背景', + label: '字体颜色', + value: '--ibiz-panel-app-header-horizontal-color', + defaultValue: '--ibiz-color-primary-text', + labelLang: 'topColor', + descLang: 'topColorDesc', + className: 'ibiz-panel-app-header', + }, + { + label: '背景色', value: '--ibiz-panel-app-header-horizontal-bg-color', defaultValue: '--ibiz-color-primary', labelLang: 'topBgColor', @@ -376,19 +384,43 @@ export const predefineThemeVars = [ className: 'ibiz-panel-app-header', }, { - label: '字体颜色', - value: '--ibiz-panel-app-header-horizontal-color', - defaultValue: '--ibiz-color-primary-text', - labelLang: 'topColor', - descLang: 'topColorDesc', + label: '应用菜单字体颜色', + value: '--ibiz-panel-app-header-horizontal-menu-color', + defaultValue: '--ibiz-color-text-menu', + labelLang: 'appMenuColor', + descLang: 'appMenuColorDesc', + className: 'ibiz-panel-app-header', + }, + { + label: '应用菜单悬浮字体色', + value: '--ibiz-panel-app-header-horizontal-hover-color', + defaultValue: '--ibiz-color-primary-hover-text', + labelLang: 'appMenuHoverColor', + descLang: 'appMenuHoverColorDesc', className: 'ibiz-panel-app-header', }, { - label: '选中色', + label: '应用菜单悬浮背景色', value: '--ibiz-panel-app-header-horizontal-hover-bg-color', defaultValue: '--ibiz-color-primary-hover', - labelLang: 'topSelectBgColor', - descLang: 'topSelectBgColorDesc', + labelLang: 'appMenuHoverBgColor', + descLang: 'appMenuHoverBgColorDesc', + className: 'ibiz-panel-app-header', + }, + { + label: '应用菜单选中字体色', + value: '--ibiz-panel-app-header-horizontal-active-color', + defaultValue: '--ibiz-color-primary-active-text', + labelLang: 'appMenuActiveColor', + descLang: 'appMenuActiveColorDesc', + className: 'ibiz-panel-app-header', + }, + { + label: '应用菜单选中背景色', + value: '--ibiz-panel-app-header-horizontal-active-bg-color', + defaultValue: '--ibiz-color-primary-active', + labelLang: 'appMenuActiveBgColor', + descLang: 'appMenuActiveBgColorDesc', className: 'ibiz-panel-app-header', }, ], @@ -398,7 +430,15 @@ export const predefineThemeVars = [ labelLang: 'sidebar', vars: [ { - label: '背景', + label: '字体颜色', + value: '--ibiz-panel-app-header-color', + defaultValue: '--ibiz-color-primary-text', + labelLang: 'sidebarColor', + descLang: 'sidebarColorDesc', + className: 'ibiz-panel-app-header', + }, + { + label: '背景色', value: '--ibiz-panel-app-header-bg-color', defaultValue: '--ibiz-color-primary', labelLang: 'sidebarBg', @@ -406,27 +446,43 @@ export const predefineThemeVars = [ className: 'ibiz-panel-app-header', }, { - label: '字体颜色', - value: '--ibiz-panel-app-header-color', - defaultValue: '--ibiz-color-primary-text', - labelLang: 'sidebarColor', - descLang: 'sidebarColorDesc', + label: '应用菜单字体颜色', + value: '--ibiz-panel-app-header-menu-color', + defaultValue: '--ibiz-color-text-menu', + labelLang: 'appMenuColor', + descLang: 'appMenuColorDesc', className: 'ibiz-panel-app-header', }, { - label: '悬浮色', - value: '--ibiz-panel-app-header-select-bg-color', - defaultValue: '--ibiz-color-primary-active', - labelLang: 'sidebarHoverBgColor', - descLang: 'sidebarHoverBgColorDesc', + label: '应用菜单悬浮字体色', + value: '--ibiz-panel-app-header-hover-color', + defaultValue: '--ibiz-color-primary-hover-text', + labelLang: 'appMenuHoverColor', + descLang: 'appMenuHoverColorDesc', className: 'ibiz-panel-app-header', }, { - label: '选中色', + label: '应用菜单悬浮背景色', value: '--ibiz-panel-app-header-hover-bg-color', defaultValue: '--ibiz-color-primary-hover', - labelLang: 'sidebarSelectBgColor', - descLang: 'sidebarSelectBgColorDesc', + labelLang: 'appMenuHoverBgColor', + descLang: 'appMenuHoverBgColorDesc', + className: 'ibiz-panel-app-header', + }, + { + label: '应用菜单选中字体色', + value: '--ibiz-panel-app-header-active-color', + defaultValue: '--ibiz-color-primary-active-text', + labelLang: 'appMenuActiveColor', + descLang: 'appMenuActiveColorDesc', + className: 'ibiz-panel-app-header', + }, + { + label: '应用菜单选中背景色', + value: '--ibiz-panel-app-header-active-bg-color', + defaultValue: '--ibiz-color-primary-active', + labelLang: 'appMenuActiveBgColor', + descLang: 'appMenuActiveBgColorDesc', className: 'ibiz-panel-app-header', }, ], diff --git a/src/common/custom-theme/custom-theme.scss b/src/common/custom-theme/custom-theme.scss index 579c32c8..b68f8a51 100644 --- a/src/common/custom-theme/custom-theme.scss +++ b/src/common/custom-theme/custom-theme.scss @@ -9,7 +9,7 @@ } } @include b(custom-theme-content) { - height: auto; + flex-grow: 1; padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base'); overflow-y: auto; diff --git a/src/control/app-menu/app-menu.scss b/src/control/app-menu/app-menu.scss index eebe2d9f..85b49a32 100644 --- a/src/control/app-menu/app-menu.scss +++ b/src/control/app-menu/app-menu.scss @@ -1,6 +1,6 @@ /* control-appmenu 菜单 start */ $control-appmenu: ( - 'collapse-item-hover-color': getCssVar(color, primary), + 'collapse-item-hover-color': getCssVar(color, primary, hover, text), 'collapse-item-padding': getCssVar(spacing, base), 'icon-width': getCssVar(width-icon, large), 'icon-height': getCssVar(width-icon, large), @@ -12,11 +12,11 @@ $control-appmenu: ( ); $control-appmenu-item: ( - 'selected-color': getCssVar(color, text, 1), - 'selected-bg-color': getCssVar(color, primary, hover), 'selected-border-color': transparent, - 'hover-color': getCssVar(color, primary, text), - 'hover-bg-color': getCssVar(color, primary, active), + 'selected-color': getCssVar(color, primary, active, text), + 'selected-bg-color': getCssVar(color, primary, active), + 'hover-color': getCssVar(color, primary, hover, text), + 'hover-bg-color': getCssVar(color, primary, hover), 'padding': getCssVar(spacing, tight), 'border-radius': getCssVar(border-radius, small), 'border': 2px solid getCssVar(color, text, 1), @@ -26,9 +26,9 @@ $control-appmenu-item: ( 'color': getCssVar(color, text, menu), 'separator-color': getCssVar(color, scroll, menu), 'horizontal-selected-color': getCssVar(color, primary, active, text), - 'horizontal-selected-bg-color': getCssVar(color, primary, hover), - 'horizontal-hover-color': getCssVar(color, primary, text), - 'horizontal-hover-bg-color': transparent, + 'horizontal-selected-bg-color': getCssVar(color, primary, active), + 'horizontal-hover-color': getCssVar(color, primary, hover, text), + 'horizontal-hover-bg-color': getCssVar(color, primary, hover), 'horizontal-color': getCssVar(color, text, menu), 'horizontal-font-size': getCssVar(font-size, header-5), 'horizontal-height': 100%, diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts index 3f686b2b..7b19844a 100644 --- a/src/locale/en/index.ts +++ b/src/locale/en/index.ts @@ -221,10 +221,6 @@ export default { sidebar: 'Side navigation bar', sidebarBg: 'Background color', sidebarBgDesc: 'Side navigation bar background color', - sidebarHoverBgColor: 'Hover color', - sidebarHoverBgColorDesc: 'The sidebar navigation menu suspends colors', - sidebarSelectBgColor: 'Selected color', - sidebarSelectBgColorDesc: 'Side navigation bar menu Select color', sidebarColor: 'Font Color', sidebarColorDesc: 'Side navigation bar font color', top: 'Top navigation bar', @@ -232,10 +228,20 @@ export default { topBgColorDesc: 'Top navigation bar background color', topColor: 'Font Color', topColorDesc: 'Top navigation bar font color', - topHoverBgColor: 'Hover color', - topHoverBgColorDesc: 'Top navigation bar suspension color', - topSelectBgColor: 'Selected color', - topSelectBgColorDesc: 'Top navigation bar select color', + appMenuColor: 'Menu colors', + appMenuColorDesc: 'Navigation bar Application Menu Font color', + appMenuHoverColor: 'Menu Suspension color', + appMenuHoverColorDesc: + 'Navigation bar Application Menu Font Suspension color', + appMenuHoverBgColor: 'Menu suspended background color', + appMenuHoverBgColorDesc: + 'Navigation bar apply menu suspension background color', + appMenuActiveColor: 'Menu color selection', + appMenuActiveColorDesc: + 'Navigation bar application menu Select Font color ', + appMenuActiveBgColor: 'Menu select Background color', + appMenuActiveBgColorDesc: + 'navigation application menu to select the background color', ctrl: 'control', grid: 'Table', gridHeaderBg: 'Table header Background color', diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts index a34a1866..cc6a3bd1 100644 --- a/src/locale/zh-CN/index.ts +++ b/src/locale/zh-CN/index.ts @@ -203,23 +203,25 @@ export default { disabledFill: '禁用填充色', disabledFillDesc: '禁用态 - 填充', sidebar: '侧边导航栏', - sidebarBg: '背景', + sidebarBg: '背景色', sidebarBgDesc: '侧边导航栏背景色', - sidebarHoverBgColor: '悬浮色', - sidebarHoverBgColorDesc: '侧边导航栏菜单悬浮色', - sidebarSelectBgColor: '选中色', - sidebarSelectBgColorDesc: '侧边导航栏菜单选中色', sidebarColor: '字体颜色', sidebarColorDesc: '侧边导航栏字体色', top: '顶部导航栏', - topBgColor: '背景', + topBgColor: '背景色', topBgColorDesc: '顶部导航栏背景色', - topColor: '颜色', + topColor: '字体颜色', topColorDesc: '顶部导航栏字体色', - topHoverBgColor: '悬浮色', - topHoverBgColorDesc: '顶部导航栏悬浮色', - topSelectBgColor: '选中色', - topSelectBgColorDesc: '顶部导航栏选中色', + appMenuColor: '菜单字体颜色', + appMenuColorDesc: '导航栏应用菜单字体颜色', + appMenuHoverColor: '菜单悬浮字体色', + appMenuHoverColorDesc: '导航栏应用菜单字体悬浮色', + appMenuHoverBgColor: '菜单悬浮背景色', + appMenuHoverBgColorDesc: '导航栏应用菜单悬浮背景色', + appMenuActiveColor: '菜单选中字体色', + appMenuActiveColorDesc: '导航栏应用菜单选中字体色', + appMenuActiveBgColor: '菜单选中背景色', + appMenuActiveBgColorDesc: '导航栏应用菜单选中背景色', ctrl: '控件', grid: '表格', gridHeaderBg: '表格头背景色', diff --git a/src/panel-component/panel-app-header/panel-app-header.scss b/src/panel-component/panel-app-header/panel-app-header.scss index 5f1774fb..991369f0 100644 --- a/src/panel-component/panel-app-header/panel-app-header.scss +++ b/src/panel-component/panel-app-header/panel-app-header.scss @@ -1,32 +1,41 @@ $panel-app-header: ( 'color': getCssVar(color, primary, text), 'bg-color': getCssVar(color, primary), + 'menu-color': getCssVar(color, text, menu), + 'hover-color': getCssVar(color, primary, hover, text), 'hover-bg-color': getCssVar(color, primary, hover), - 'select-bg-color': getCssVar(color, primary, active), + 'active-color': getCssVar(color, primary, active, text), + 'active-bg-color': getCssVar(color, primary, active), + 'horizontal-color': getCssVar(color, primary, text), 'horizontal-bg-color': getCssVar(color, primary), + 'horizontal-hover-color': getCssVar(color, primary, hover, text), 'horizontal-hover-bg-color': getCssVar(color, primary, hover), - 'horizontal-select-bg-color': getCssVar(color, primary, active), + 'horizontal-active-color': getCssVar(color, primary, active, text), + 'horizontal-active-bg-color': getCssVar(color, primary, active), + 'horizontal-menu-color': getCssVar(color, text, menu), 'border-color': getCssVar(color, border), ); @include b(panel-app-header) { @include set-component-css-var('panel-app-header', $panel-app-header); - - // 临时添加important - #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, color) !important; - #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, color) !important; - #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, color) !important; - #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, color) !important; + #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, color); + #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, color); + #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, color); + #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, color); width: 100%; height: 100%; color: getCssVar(panel-app-header, color); background-color: getCssVar(panel-app-header, bg, color); * { + #{getCssVarName(color, text, menu)}: getCssVar(panel-app-header, menu, color); #{getCssVarName(color, primary)}: getCssVar(panel-app-header, bg, color); + #{getCssVarName(color, primary, text)}: getCssVar(panel-app-header, color); #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, hover, bg, color); - #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, select, bg, color); + #{getCssVarName(color, primary, hover, text)}: getCssVar(panel-app-header, hover, color); + #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, active, bg, color); + #{getCssVarName(color, primary, active, text)}: getCssVar(panel-app-header, active, color); } >.#{bem(row)} { @@ -36,18 +45,21 @@ $panel-app-header: ( @include b(panel-app-header) { @include m(horizontal) { - // 临时添加important - #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, horizontal, color) !important; - #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, horizontal, color) !important; - #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, horizontal, color) !important; - #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, horizontal, color) !important; + #{getCssVarName(color, text, 0)}: getCssVar(panel-app-header, horizontal, color); + #{getCssVarName(color, text, 1)}: getCssVar(panel-app-header, horizontal, color); + #{getCssVarName(color, text, 2)}: getCssVar(panel-app-header, horizontal, color); + #{getCssVarName(color, text, 3)}: getCssVar(panel-app-header, horizontal, color); color: getCssVar(panel-app-header, horizontal, color); background-color: getCssVar(panel-app-header, horizontal, bg, color); * { + #{getCssVarName(color, text, menu)}: getCssVar(panel-app-header, horizontal, menu, color); #{getCssVarName(color, primary)}: getCssVar(panel-app-header, horizontal, bg, color); + #{getCssVarName(color, primary, text)}: getCssVar(panel-app-header, horizontal, color); #{getCssVarName(color, primary, hover)}: getCssVar(panel-app-header, horizontal, hover, bg, color); - #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, horizontal, select, bg, color); + #{getCssVarName(color, primary, hover, text)}: getCssVar(panel-app-header, horizontal, hover, color); + #{getCssVarName(color, primary, active)}: getCssVar(panel-app-header, horizontal, active, bg, color); + #{getCssVarName(color, primary, active, text)}: getCssVar(panel-app-header, horizontal, active, color); } } } -- Gitee