diff --git a/apps/antd-view/src/router/routes/modules/vben.ts b/apps/antd-view/src/router/routes/modules/vben.ts index 3836fa44..2f5515f1 100644 --- a/apps/antd-view/src/router/routes/modules/vben.ts +++ b/apps/antd-view/src/router/routes/modules/vben.ts @@ -10,7 +10,7 @@ export const vbenRoutes: RouteRecordRaw[] = [ component: BasicLayout, meta: { icon: preference.logo, - title: 'Vben Admin', + title: 'Vben', }, name: 'AboutLayout', path: '/vben-admin', diff --git a/internal/tsconfig/package.json b/internal/tsconfig/package.json index 81ef8d3d..9cf6b2c2 100644 --- a/internal/tsconfig/package.json +++ b/internal/tsconfig/package.json @@ -20,6 +20,6 @@ ], "dependencies": { "@vben/types": "workspace:*", - "vite": "^6.0.0-alpha.17" + "vite": "5.2.11" } } diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json index 485579ff..91c676c0 100644 --- a/internal/vite-config/package.json +++ b/internal/vite-config/package.json @@ -48,7 +48,7 @@ "rollup-plugin-visualizer": "^5.12.0", "sass": "^1.77.2", "unplugin-turbo-console": "^1.8.6", - "vite": "^6.0.0-alpha.17", + "vite": "5.2.11", "vite-plugin-compression": "^0.5.1", "vite-plugin-dts": "^3.9.1", "vite-plugin-html": "^3.2.2", diff --git a/package.json b/package.json index 1d84226d..1e589464 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "turbo": "^1.13.3", "typescript": "^5.4.5", "unbuild": "^2.0.0", - "vite": "^6.0.0-alpha.17", + "vite": "5.2.11", "vitest": "^2.0.0-beta.3", "vue-tsc": "^2.0.19" }, diff --git a/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue b/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue index 07e8f4c1..6b6eb990 100644 --- a/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue +++ b/packages/@vben-core/uikit/layout-ui/src/vben-layout.vue @@ -48,7 +48,7 @@ const props = withDefaults(defineProps(), { sideTheme: 'dark', sideWidth: 180, // tabsBackgroundColor: 'hsl(var(--color-background))', - tabsHeight: 38, + tabsHeight: 36, tabsVisible: true, zIndex: 200, }); diff --git a/packages/@vben-core/uikit/menu-ui/src/menu.vue b/packages/@vben-core/uikit/menu-ui/src/menu.vue index acd8747c..2c69d502 100644 --- a/packages/@vben-core/uikit/menu-ui/src/menu.vue +++ b/packages/@vben-core/uikit/menu-ui/src/menu.vue @@ -12,7 +12,7 @@ interface Props extends MenuProps { } defineOptions({ - name: 'MenuUi', + name: 'MenuView', }); const props = withDefaults(defineProps(), { diff --git a/packages/@vben-core/uikit/tabs-ui/src/styles/tabs.scss b/packages/@vben-core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss similarity index 59% rename from packages/@vben-core/uikit/tabs-ui/src/styles/tabs.scss rename to packages/@vben-core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss index 5ede7391..0c70a578 100644 --- a/packages/@vben-core/uikit/tabs-ui/src/styles/tabs.scss +++ b/packages/@vben-core/uikit/tabs-ui/src/components/chrome-tabs/chrome-tabs.scss @@ -1,29 +1,28 @@ @import '@vben-core/design/global'; -@include b('tabs-ui') { +@include b('chrome-tabs') { --tabs-background: hsl(var(--color-background)); - --tabs-gap: 10px; + --tabs-gap: 7px; --tabs-divider: hsl(var(--color-border)); --tabs-hover: hsl(var(--color-heavy)); - --tabs-active-background: hsl(var(--color-primary) / 15%); - --tabs-active: hsl(var(--color-primary)); + --tabs-active-background: hsl(var(--color-primary) / 100%); + --tabs-active: hsl(var(--color-primary-foreground)); position: relative; width: 100%; height: 100%; - padding-top: 2px; + padding-top: 4px; background-color: var(--tabs-background); @include e('content') { position: relative; - height: 100%; + height: 32px; overflow: hidden; } } -@include b('tab') { +@include b('chrome-tab') { position: absolute; - box-sizing: border-box; display: flex; align-items: center; height: 100%; @@ -32,24 +31,24 @@ user-select: none; @include is('active') { - z-index: 1; + z-index: 2; color: var(--tabs-active); - .#{$namespace}-tab__extra:not(.is-pin) { + .#{$namespace}-chrome-tab__extra:not(.is-pin) { background-color: var(--tabs-active-background); opacity: 1; } - .#{$namespace}-tab-background__divider { + .#{$namespace}-chrome-tab-background__divider { display: none; } - .#{$namespace}-tab-background__content { + .#{$namespace}-chrome-tab-background__content { background-color: var(--tabs-active-background); } - .#{$namespace}-tab-background__before, - .#{$namespace}-tab-background__after { + .#{$namespace}-chrome-tab-background__before, + .#{$namespace}-chrome-tab-background__after { fill: var(--tabs-active-background); } } @@ -58,8 +57,7 @@ position: absolute; right: 0; left: 0; - z-index: 1; - box-sizing: border-box; + // z-index: 1; display: flex; align-items: center; height: 100%; @@ -73,19 +71,18 @@ @include e('extra') { position: absolute; top: 50%; - right: calc(var(--tabs-gap) * 1.5); + right: calc(var(--tabs-gap) * 2); z-index: 1; width: 14px; height: 14px; border-radius: 50%; opacity: 0; - - // transition: all 0.15s ease; + transition: 0.15s; transform: translateY(-50%); - &:hover { - // background-color: hsl(var(--color-accent)); - } + // &:hover { + // background-color: hsl(var(--color-accent)); + // } } @include e('extra-icon') { @@ -116,14 +113,26 @@ @include e('label') { position: relative; - box-sizing: border-box; flex: 1; - margin-right: px; + margin-right: 8px; margin-left: 5%; overflow: hidden; font-size: 14px; - text-align: center; white-space: nowrap; + mask-image: linear-gradient( + 90deg, + #000 0%, + #000 calc(100% - 20px), + transparent + ); + + // &.no-close { + // margin-right: 0; + // } + + // &.no-icon { + // margin-left: 0; + // } } @include is('hidden-icon') { @@ -131,51 +140,44 @@ } &:hover { - .#{$namespace}-tab__extra.is-pin { + .#{$namespace}-chrome-tab__extra.is-pin { opacity: 1; } } &:not(.is-active):hover { - z-index: 10; + z-index: 1; - .#{$namespace}-tab__extra { + .#{$namespace}-chrome-tab__extra { opacity: 1; } - .#{$namespace}-tab-background__divider { + .#{$namespace}-chrome-tab-background__divider { display: none; } - .#{$namespace}-tab-background__content { + .#{$namespace}-chrome-tab-background__content { background-color: var(--tabs-hover); } - .#{$namespace}-tab-background__before, - .#{$namespace}-tab-background__after { + .#{$namespace}-chrome-tab-background__before, + .#{$namespace}-chrome-tab-background__after { fill: var(--tabs-hover); } } - &:last-of-type { - .#{$namespace}-tab-background__divider::after { - display: none; - } - } - &:first-of-type { - .#{$namespace}-tab-background__divider::before { + .#{$namespace}-chrome-tab-background__divider::before { display: none; } } } -@include b('tab-background') { +@include b('chrome-tab-background') { position: absolute; - box-sizing: border-box; width: 100%; height: 100%; - padding: 0 calc(var(--tabs-gap) - 1px); + padding: 0 calc(var(--tabs-gap) + 0px); @include e('divider') { position: absolute; @@ -184,45 +186,47 @@ height: 100%; margin: 0 7px; - // &::before { - // position: absolute; - // top: 20%; - // right: 100%; - // width: 1px; - // height: 60%; - // content: ''; - // background-color: var(--tabs-divider); - // } + &::before { + position: absolute; + top: 20%; + right: 100%; + width: 1px; + height: 60%; + content: ''; + background-color: var(--tabs-divider); + } - // &::after { - // position: absolute; - // top: 20%; - // left: calc(100% - 1px); - // width: 1px; - // height: 60%; - // content: ''; - // background-color: var(--tabs-divider); - // } + &::after { + position: absolute; + top: 20%; + left: calc(100% - 1px); + width: 1px; + height: 60%; + content: ''; + background-color: var(--tabs-divider); + } } @include e('content') { height: 100%; - border-top-left-radius: 8px; - border-top-right-radius: 8px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; transition: background 0.15s ease; } @include e('before') { position: absolute; bottom: -1px; - left: -1px; + left: -3px; fill: transparent; + transition: 0.15s; } @include e('after') { position: absolute; - right: -1px; + right: -3px; bottom: -1px; fill: transparent; + transition: 0.15s; } } diff --git a/packages/@vben-core/uikit/tabs-ui/src/components/tab-background.vue b/packages/@vben-core/uikit/tabs-ui/src/components/chrome-tabs/tab-background.vue similarity index 84% rename from packages/@vben-core/uikit/tabs-ui/src/components/tab-background.vue rename to packages/@vben-core/uikit/tabs-ui/src/components/chrome-tabs/tab-background.vue index a3df9c5d..8cb6fc4b 100644 --- a/packages/@vben-core/uikit/tabs-ui/src/components/tab-background.vue +++ b/packages/@vben-core/uikit/tabs-ui/src/components/chrome-tabs/tab-background.vue @@ -2,10 +2,10 @@ import { useNamespace } from '@vben-core/toolkit'; defineOptions({ - name: 'TabBackground', + name: 'ChromeTabBackground', }); -const { b, e } = useNamespace('tab-background'); +const { b, e } = useNamespace('chrome-tab-background');