diff --git a/packages/@core/base/icons/src/lucide.ts b/packages/@core/base/icons/src/lucide.ts index a167aea04..973251317 100644 --- 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, diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index f788e895f..43cc73fac 100644 --- 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, diff --git a/packages/@core/preferences/src/constants.ts b/packages/@core/preferences/src/constants.ts index 7ec2007d0..562a7afa9 100644 --- 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%)', diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index e1ef0a384..6db64af2a 100644 --- 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; /** 是否开启访问历史记录 */ diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue index 644ff59e8..4d3ed6174 100644 --- 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); + // } + } } } diff --git a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue index 6dfeb77f0..5c8c8a860 100644 --- 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" diff --git 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 index 941ecfe26..dfb4a5e15 100644 --- 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) { diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue index effa93cf1..a573f4490 100644 --- 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) { diff --git a/packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts b/packages/@core/ui-kit/tabs-ui/src/components/widgets/index.ts index a26899ef5..f7634ce8b 100644 --- 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'; diff --git 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 index 24f43a9ee..045a670b3 100644 --- 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 @@ + + diff --git a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue index fbc6b0d90..b5464f00e 100644 --- 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')" > - +
- +
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue index 45b978334..b8912c095 100644 --- a/packages/effects/layouts/src/basic/layout.vue +++ b/packages/effects/layouts/src/basic/layout.vue @@ -411,7 +411,7 @@ const headerSlots = computed(() => { diff --git a/packages/effects/layouts/src/basic/tabbar/tabbar.vue b/packages/effects/layouts/src/basic/tabbar/tabbar.vue index 8e4f33ba8..367604eac 100644 --- 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) { />
+ {