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

2026-03-12 18:50:53 +08:00 · 2026-02-09 16:31:29 +08:00
parent 8a215fbcc7
commit 893f74dc3e
16 changed files with 79 additions and 38 deletions
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/packages/@core/base/icons/src/lucide.ts
@@ -29,6 +29,7 @@ export {
  FoldHorizontal,
  Fullscreen,
  Github,
+  Grid,
  Grip,
  GripVertical,
  Menu as IconDefault,
@@ -36,6 +37,7 @@ export {
  Info,
  InspectionPanel,
  Languages,
+  LayoutGrid,
  LoaderCircle,
  LockKeyhole,
  LogOut,
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -105,6 +105,7 @@ const defaultPreferences: Preferences = {
    showIcon: true,
    showMaximize: true,
    showMore: true,
+    showRefresh: true,
    styleType: 'chrome',
    visitHistory: true,
    wheelable: true,
--- a/packages/@core/preferences/src/constants.ts
+++ b/packages/@core/preferences/src/constants.ts
@@ -38,12 +38,10 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
    primaryColor: 'hsl(240 5.9% 10%)',
    type: 'zinc',
  },
-
  {
    color: 'hsl(181 84% 32%)',
    type: 'deep-green',
  },
-
  {
    color: 'hsl(211 91% 39%)',
    type: 'deep-blue',
@@ -56,7 +54,6 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
    color: 'hsl(0 75% 42%)',
    type: 'rose',
  },
-
  {
    color: 'hsl(0 0% 25%)',
    darkPrimaryColor: 'hsl(0 0% 98%)',
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -222,6 +222,8 @@ interface TabbarPreferences {
  showMaximize: boolean;
  /** 显示更多按钮 */
  showMore: boolean;
+  /** 显示刷新按钮 */
+  showRefresh: boolean;
  /** 标签页风格 */
  styleType: TabsStyleType;
  /** 是否开启访问历史记录 */
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -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>
--- a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -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"
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -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">
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -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
              />

--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts
@@ -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';
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-more.vue
@@ -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>
--- a/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-refresh.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/widgets/tool-refresh.vue
@@ -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>
--- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -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>
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -411,7 +411,7 @@ const headerSlots = computed(() => {

      <template v-if="preferencesButtonPosition.fixed">
        <Preferences
-          class="z-100 fixed bottom-20 right-0"
+          class="z-100 fixed right-0 top-1/2 -translate-y-1/2 transform"
          @clear-preferences-and-logout="clearPreferencesAndLogout"
        />
      </template>
--- a/packages/effects/layouts/src/basic/tabbar/tabbar.vue
+++ b/packages/effects/layouts/src/basic/tabbar/tabbar.vue
@@ -6,7 +6,12 @@ import { useContentMaximize, useTabs } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import { useTabbarStore } from '@vben/stores';

-import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
+import {
+  TabsToolMore,
+  TabsToolRefresh,
+  TabsToolScreen,
+  TabsView,
+} from '@vben-core/tabs-ui';

 import { useTabbar } from './use-tabbar';

@@ -19,7 +24,7 @@ defineProps<{ showIcon?: boolean; theme?: string }>();
 const route = useRoute();
 const tabbarStore = useTabbarStore();
 const { contentIsMaximize, toggleMaximize } = useContentMaximize();
-const { unpinTab } = useTabs();
+const { refreshTab, unpinTab } = useTabs();

 const {
  createContextMenus,
@@ -65,6 +70,10 @@ if (!preferences.tabbar.persist) {
  />
  <div class="flex-center h-full">
    <TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
+    <TabsToolRefresh
+      v-if="preferences.tabbar.showRefresh"
+      @refresh="refreshTab"
+    />
    <TabsToolScreen
      v-if="preferences.tabbar.showMaximize"
      :screen="contentIsMaximize"
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@@ -58,7 +58,6 @@ function typeView(name: BuiltinThemeType) {
    case 'green': {
      return $t('preferences.theme.builtin.green');
    }
-
    case 'neutral': {
      return $t('preferences.theme.builtin.neutral');
    }
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -379,9 +379,11 @@ onUnmounted(() => {
      <!-- 左侧操作区域或者title -->
      <template v-if="showToolbar" #toolbar-actions="slotProps">
        <slot v-if="showTableTitle" name="table-title">
-          <div class="mr-1 pl-1 text-[1rem]">
+          <div
+            class="flex items-center justify-center gap-1 text-[1rem] font-bold"
+          >
            {{ tableTitle }}
-            <VbenHelpTooltip v-if="tableTitleHelp" trigger-class="pb-1">
+            <VbenHelpTooltip v-if="tableTitleHelp">
              {{ tableTitleHelp }}
            </VbenHelpTooltip>
          </div>