{{ $t('message.layout.twoIsMenuBarColorGradual') }}
@@ -577,6 +588,7 @@ const onSetLayout = (layout: string) => {
const initLayoutChangeFun = () => {
onBgColorPickerChange('menuBar');
onBgColorPickerChange('menuBarColor');
+ onBgColorPickerChange('menuBarActiveColor');
onBgColorPickerChange('topBar');
onBgColorPickerChange('topBarColor');
onBgColorPickerChange('columnsMenuBar');
diff --git a/src/stores/themeConfig.ts b/src/stores/themeConfig.ts
index 39097ed..839827c 100644
--- a/src/stores/themeConfig.ts
+++ b/src/stores/themeConfig.ts
@@ -23,10 +23,7 @@ export const useThemeConfig = defineStore('themeConfig', {
isIsDark: false,
/**
- * 菜单 / 顶栏
- * 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
- * 切换布局需手动设置样式，设置的样式自动同步各布局，
- * 代码位置：/@/layout/navBars/breadcrumb/setings.vue
+ * 顶栏设置
*/
// 默认顶栏导航背景颜色
topBar: '#ffffff',
@@ -34,12 +31,22 @@ export const useThemeConfig = defineStore('themeConfig', {
topBarColor: '#606266',
// 是否开启顶栏背景颜色渐变
isTopBarColorGradual: false,
+
+ /**
+ * 菜单设置
+ */
// 默认菜单导航背景颜色
menuBar: '#545c64',
// 默认菜单导航字体颜色
menuBarColor: '#eaeaea',
+ // 默认菜单高亮背景色
+ menuBarActiveColor: 'rgba(0, 0, 0, 0.2)',
// 是否开启菜单背景颜色渐变
isMenuBarColorGradual: false,
+
+ /**
+ * 分栏设置
+ */
// 默认分栏菜单背景颜色
columnsMenuBar: '#545c64',
// 默认分栏菜单字体颜色
diff --git a/src/theme/dark.scss b/src/theme/dark.scss
index 038a2b0..ef7534b 100644
--- a/src/theme/dark.scss
+++ b/src/theme/dark.scss
@@ -22,6 +22,7 @@
--next-bg-topBarColor: var(--next-color-bar) !important;
--next-bg-menuBar: var(--next-color-disabled) !important;
--next-bg-menuBarColor: var(--next-color-bar) !important;
+ --next-bg-menuBarActiveColor: var(--next-color-hover-rgba) !important;
--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
--next-border-color-light: var(--next-border-black) !important;
diff --git a/src/theme/element.scss b/src/theme/element.scss
index 96b9832..6712c78 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -68,7 +68,7 @@
------------------------------- */
// 鼠标 hover 时颜色
.el-menu-hover-bg-color {
- background-color: var(--next-color-menu-hover) !important;
+ background-color: var(--next-bg-menuBarActiveColor) !important;
}
// 默认样式修改
.el-menu {
@@ -108,6 +108,9 @@
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
@extend .el-menu-hover-bg-color;
}
+.el-menu-item:hover {
+ @extend .el-menu-hover-bg-color;
+}
.el-sub-menu.is-active.is-opened .el-sub-menu__title {
background-color: unset !important;
}
@@ -279,6 +282,10 @@
.layout-container-view .el-scrollbar__view {
height: 100%;
}
+/*防止分栏布局二级菜单很多时，滚动条消失问题*/
+.layout-columns-warp .layout-aside .el-scrollbar__view {
+ height: unset !important;
+}
/* Pagination 分页
------------------------------- */
diff --git a/src/theme/tableTool.scss b/src/theme/tableTool.scss
index c773387..d5ab55e 100644
--- a/src/theme/tableTool.scss
+++ b/src/theme/tableTool.scss
@@ -8,18 +8,20 @@
height: 40px;
align-items: center;
}
- .tool-item {
- display: flex;
- box-sizing: border-box;
- color: var(--el-text-color-primary);
- height: 35px;
- align-items: center;
- padding: var(--el-popover-padding);
- &:hover {
- background: var(--el-fill-color-lighter);
- }
- i {
- opacity: 0.7;
+ .tool-sortable {
+ max-height: 303px;
+ .tool-sortable-item {
+ display: flex;
+ box-sizing: border-box;
+ color: var(--el-text-color-primary);
+ align-items: center;
+ padding: 0 12px;
+ &:hover {
+ background: var(--el-fill-color-lighter);
+ }
+ i {
+ opacity: 0.7;
+ }
}
}
}
diff --git a/src/types/pinia.d.ts b/src/types/pinia.d.ts
index 45ad485..09c6e47 100644
--- a/src/types/pinia.d.ts
+++ b/src/types/pinia.d.ts
@@ -48,6 +48,7 @@ declare interface ThemeConfigState {
isTopBarColorGradual: boolean;
menuBar: string;
menuBarColor: string;
+ menuBarActiveColor: string;
isMenuBarColorGradual: boolean;
columnsMenuBar: string;
columnsMenuBarColor: string;
diff --git a/src/views/pages/workflow/index.vue b/src/views/pages/workflow/index.vue
index b217141..28ab1c6 100644
--- a/src/views/pages/workflow/index.vue
+++ b/src/views/pages/workflow/index.vue
@@ -151,7 +151,7 @@ const initLeftNavList = () => {
};
// 左侧导航-初始化拖动
const initSortable = () => {
- leftNavRefs.forEach((v) => {
+ leftNavRefs.value.forEach((v) => {
Sortable.create(v as HTMLDivElement, {
group: {
name: 'vue-next-admin-1',