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

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,

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,

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%)',

packages/@core/preferences/src/types.ts

@@ -222,6 +222,8 @@ interface TabbarPreferences {
   showMaximize: boolean;
   /** 显示更多按钮 */
   showMore: boolean;
+  /** 显示刷新按钮 */
+  showRefresh: boolean;
   /** 标签页风格 */
   styleType: TabsStyleType;
   /** 是否开启访问历史记录 */

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-background-color: var(--menu-background-color);
-      --menu-submenu-active-background-color: hsl(var(--accent));
       --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-submenu-background-color: var(--menu-background-color);
-      --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-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 {
+  &:not(.is-active):hover {
-  &:hover {
+    &:hover {
-    color: var(--menu-submenu-hover-color);
+      //color: var(--menu-submenu-hover-color);
-    text-decoration: none;
+      text-decoration: none;
-    cursor: pointer;
+      cursor: pointer;
-    background: var(--menu-submenu-hover-background-color) !important;
+      background: var(--menu-submenu-hover-background-color) !important;
 
-    // svg {
+      // svg {
-    //   fill: var(--menu-submenu-hover-color);
+      //   fill: var(--menu-submenu-hover-color);
-    // }
+      // }
+    }
   }
 }
 </style>

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"

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">

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
               />
 

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';

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>

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>

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>

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>

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"

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');
     }

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>