oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: 优化横向布局时菜单激活或聚焦时背景色，标签工具栏新增刷新按钮，其他样式优化

Browse Source
This commit is contained in:
zouawen
2026-02-09 16:31:29 +08:00
parent 8a215fbcc7
commit 893f74dc3e
16 changed files with 79 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -463,33 +463,33 @@ $namespace: vben;
&.is-dark {
--menu-background-color: hsl(var(--menu));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--foreground) / 80%);
--menu-item-background-color: var(--menu-background-color);
--menu-item-hover-color: hsl(var(--accent-foreground));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--accent-foreground));
--menu-item-active-background-color: hsl(var(--accent));
--menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
--menu-submenu-hover-color: hsl(var(--accent-foreground));
--menu-submenu-hover-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--accent-foreground));
--menu-submenu-active-background-color: transparent;
}
&.is-light {
--menu-background-color: hsl(var(--menu));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened));
--menu-item-color: hsl(var(--accent-foreground));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--foreground));
--menu-item-hover-color: var(--menu-item-color);
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--primary));
--menu-item-active-background-color: hsl(var(--primary) / 15%);
--menu-submenu-background-color: var(--menu-background-color);
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
}
&.is-rounded {
@@ -518,25 +518,33 @@ $namespace: vben;
--menu-background-color: transparent;
&.is-dark {
--menu-background-color: hsl(var(--menu));
--menu-item-color: hsl(var(--foreground) / 80%);
--menu-item-background-color: var(--menu-background-color);
--menu-item-hover-color: hsl(var(--accent-foreground));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--accent-foreground));
--menu-item-active-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: hsl(var(--accent));
--menu-submenu-background-color: var(--menu-background-color);
--menu-submenu-hover-color: hsl(var(--accent-foreground));
--menu-submenu-hover-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--accent-foreground));
--menu-submenu-active-background-color: hsl(var(--accent));
}
&.is-light {
--menu-background-color: hsl(var(--menu));
--menu-item-color: hsl(var(--accent-foreground));
--menu-item-background-color: var(--menu-background-color);
--menu-item-hover-color: hsl(var(--menu-item-color));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--primary));
--menu-item-active-background-color: hsl(var(--primary) / 15%);
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-hover-color: hsl(var(--primary));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: hsl(var(--primary) / 15%);
--menu-submenu-background-color: var(--menu-background-color);
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: hsl(var(--primary) / 15%);
}
}
}
@@ -862,16 +870,17 @@ $namespace: vben;
padding-right: 12px !important;
}
// &:not(.is-active):hover {
&:hover {
color: var(--menu-submenu-hover-color);
text-decoration: none;
cursor: pointer;
background: var(--menu-submenu-hover-background-color) !important;
&:not(.is-active):hover {
&:hover {
//color: var(--menu-submenu-hover-color);
text-decoration: none;
cursor: pointer;
background: var(--menu-submenu-hover-background-color) !important;
// svg {
// fill: var(--menu-submenu-hover-color);
// }
// svg {
// fill: var(--menu-submenu-hover-color);
// }
}
}
}
</style>

1
packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
View File

@@ -210,6 +210,7 @@ onBeforeUnmount(() => {
opened ? '' : 'hidden',
'overflow-auto',
'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
mode === 'horizontal' ? 'is-horizontal' : '',
]"
:content-props="contentProps"
:open="true"

2
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -158,7 +158,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<VbenIcon
v-if="showIcon"
:icon="tab.icon"
class="mr-1 flex size-4 items-center overflow-hidden"
class="mr-1 flex size-4 items-center overflow-hidden group-hover:animate-[shrink_0.3s_ease-in-out]"
/>
<span class="flex-1 overflow-hidden whitespace-nowrap text-sm">

2
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -132,7 +132,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<VbenIcon
v-if="showIcon"
:icon="tab.icon"
class="mr-2 flex size-4 items-center overflow-hidden"
class="mr-2 flex size-4 items-center overflow-hidden group-hover:animate-[shrink_0.3s_ease-in-out]"
fallback
/>

1
packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts
View File

@@ -1,2 +1,3 @@
export { default as TabsToolMore } from './tool-more.vue';
export { default as TabsToolRefresh } from './tool-refresh.vue';
export { default as TabsToolScreen } from './tool-screen.vue';

4
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { DropdownMenuProps } from '@vben-core/shadcn-ui';
import { ChevronDown } from '@vben-core/icons';
import { LayoutGrid } from '@vben-core/icons';
import { VbenDropdownMenu } from '@vben-core/shadcn-ui';
defineProps<DropdownMenuProps>();
@@ -12,7 +12,7 @@ defineProps<DropdownMenuProps>();
<div
class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
>
<ChevronDown class="size-4" />
<LayoutGrid class="size-4" />
</div>
</VbenDropdownMenu>
</template>

18
packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-refresh.vue Normal file
View File

@@ -0,0 +1,18 @@
<script lang="ts" setup>
import { RotateCw } from '@vben-core/icons';
const emit = defineEmits(['refresh']);
const handleRefresh = () => {
emit('refresh');
};
</script>
<template>
<div
class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
@click="handleRefresh"
>
<RotateCw class="size-4" />
</div>
</template>

6
packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
View File

@@ -2,7 +2,7 @@
import type { TabsEmits, TabsProps } from './types';
import { useForwardPropsEmits } from '@vben-core/composables';
import { ChevronLeft, ChevronRight } from '@vben-core/icons';
import { ChevronsLeft, ChevronsRight } from '@vben-core/icons';
import { VbenScrollbar } from '@vben-core/shadcn-ui';
import { Tabs, TabsChrome } from './components';
@@ -60,7 +60,7 @@ useTabsDrag(props, emit);
class="border-r px-2"
@click="scrollDirection('left')"
>
<ChevronLeft class="size-4 h-full" />
<ChevronsLeft class="size-4 h-full" />
</span>
<div
@@ -101,7 +101,7 @@ useTabsDrag(props, emit);
class="cursor-pointer border-l px-2 text-muted-foreground hover:bg-muted"
@click="scrollDirection('right')"
>
<ChevronRight class="size-4 h-full" />
<ChevronsRight class="size-4 h-full" />
</span>
</div>
</template>