github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-23 09:40:25 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

perf: improve tabs-view scrolling (#4164)

Browse Source
This commit is contained in:
Vben 2024-08-15 23:30:07 +08:00 committed by GitHub
parent eb280ffeb7
commit d71a20ad0a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 107 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/release-drafter.yml vendored
View File

@ -42,9 +42,9 @@ version-resolver:
minor:
labels:
- "minor"
- "feature"
patch:
labels:
- "feature"
- "patch"
- "bug"
- "maintenance"

1
packages/@core/base/icons/src/lucide.ts
View File

@ -9,6 +9,7 @@ export {
Bell,
BookOpenText,
ChevronDown,
ChevronLeft,
ChevronRight,
CircleHelp,
Copy,

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

@ -75,7 +75,7 @@ function scrollIntoView() {
id="tabs-scrollbar"
class="tabs-chrome__scrollbar h-full"
horizontal
scroll-bar-class="z-10"
scroll-bar-class="z-10 hidden"
>
<!-- footer -> 4px -->
<div

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

@ -72,12 +72,12 @@ function scrollIntoView() {
</script>
<template>
<div class="h-full flex-1 overflow-hidden">
<div class="size-full flex-1 overflow-hidden">
<VbenScrollbar
id="tabs-scrollbar"
class="tabs-scrollbar h-full"
horizontal
scroll-bar-class="z-10"
scroll-bar-class="z-10 hidden"
>
<div
:class="contentClass"

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

@ -7,8 +7,10 @@ import type { TabsProps } from './types';
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { useForwardPropsEmits, useSortable } from '@vben-core/composables';
import { ChevronLeft, ChevronRight } from '@vben-core/icons';
import { Tabs, TabsChrome } from './components';
import { useTabsViewScroll } from './use-tabs-view-scroll';
interface Props extends TabsProps {}
@ -30,6 +32,8 @@ const emit = defineEmits<{
const forward = useForwardPropsEmits(props, emit);
const { initScrollbar, scrollDirection } = useTabsViewScroll();
const sortableInstance = ref<null | Sortable>(null);
// 可能会找到拖拽的子元素，这里需要确保拖拽的dom时tab元素
@ -104,13 +108,21 @@ async function initTabsSortable() {
sortableInstance.value = await initializeSortable();
}
onMounted(initTabsSortable);
async function init() {
await nextTick();
initTabsSortable();
initScrollbar();
}
onMounted(() => {
init();
});
watch(
() => props.styleType,
() => {
sortableInstance.value?.destroy();
initTabsSortable();
init();
},
);
@ -120,6 +132,32 @@ onUnmounted(() => {
</script>
<template>
<TabsChrome v-if="styleType === 'chrome'" v-bind="forward" />
<Tabs v-else v-bind="forward" />
<div
:class="{
'overflow-hidden': styleType !== 'chrome',
}"
class="flex h-full flex-1"
>
<!-- 左侧滚动按钮 -->
<span
class="hover:bg-muted text-muted-foreground cursor-pointer border-r px-2"
@click="scrollDirection('left')"
>
<ChevronLeft class="size-4 h-full" />
</span>
<TabsChrome
v-if="styleType === 'chrome'"
v-bind="{ ...forward, ...$attrs, ...$props }"
/>
<Tabs v-else v-bind="{ ...forward, ...$attrs, ...$props }" />
<!-- 左侧滚动按钮 -->
<span
class="hover:bg-muted text-muted-foreground cursor-pointer border-l px-2"
@click="scrollDirection('right')"
>
<ChevronRight class="size-4 h-full" />
</span>
</div>
</template>

59
packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts Normal file
View File

@ -0,0 +1,59 @@
import { nextTick, ref } from 'vue';
type El = Element | null | undefined;
export function useTabsViewScroll(scrollDistance: number = 150) {
const scrollbarEl = ref<El>(null);
const scrollViewportEl = ref<El>(null);
function getScrollClientWidth() {
if (!scrollbarEl.value || !scrollViewportEl.value) return {};
const scrollbarWidth = scrollbarEl.value.clientWidth;
const scrollViewWidth = scrollViewportEl.value.clientWidth;
return {
scrollbarWidth,
scrollViewWidth,
};
}
function scrollDirection(
direction: 'left' | 'right',
distance: number = scrollDistance,
) {
const { scrollbarWidth, scrollViewWidth } = getScrollClientWidth();
if (!scrollbarWidth || !scrollViewWidth) return;
if (scrollbarWidth > scrollViewWidth) return;
scrollViewportEl.value?.scrollBy({
behavior: 'smooth',
left:
direction === 'left'
? -(scrollbarWidth - distance)
: +(scrollbarWidth - distance),
});
}
async function initScrollbar() {
await nextTick();
const barEl = document.querySelector('#tabs-scrollbar');
const viewportEl = barEl?.querySelector(
'div[data-radix-scroll-area-viewport]',
);
scrollbarEl.value = barEl;
scrollViewportEl.value = viewportEl;
const activeItem = viewportEl?.querySelector('.is-active');
activeItem?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
return {
initScrollbar,
scrollDirection,
};
}

1
packages/effects/layouts/package.json
View File

@ -20,7 +20,6 @@
}
},
"dependencies": {
"@radix-icons/vue": "^1.0.0",
"@vben-core/layout-ui": "workspace:*",
"@vben-core/menu-ui": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",

26
packages/effects/layouts/src/basic/tabbar/tabbar.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { computed, onMounted } from 'vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useContentMaximize, useTabs } from '@vben/hooks';
@ -12,9 +12,6 @@ import {
TabsView,
} from '@vben-core/tabs-ui';
import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue';
import { useTabViewScroll } from './use-tab-view-scroll';
import { useTabbar } from './use-tabbar';
defineOptions({
@ -52,26 +49,9 @@ const menus = computed(() => {
if (!preferences.tabbar.persist) {
tabbarStore.closeOtherTabs(route);
}
const { scrollDirection, setScrollBarEl, setScrollViewEl } = useTabViewScroll();
onMounted(() => {
const scrollBarEl: HTMLElement | null =
document.querySelector('#tabs-scrollbar');
const scrollViewportEl: HTMLElement | null | undefined =
scrollBarEl?.querySelector('div[data-radix-scroll-area-viewport]');
setScrollBarEl(scrollBarEl);
setScrollViewEl(scrollViewportEl);
});
</script>
<template>
<ChevronLeftIcon
class="mx-2 h-full cursor-pointer"
@click="scrollDirection('left')"
/>
<TabsView
:active="currentActive"
:class="theme"
@ -86,10 +66,6 @@ onMounted(() => {
@update:active="handleClick"
/>
<div class="flex-center h-full">
<ChevronRightIcon
class="mx-2 h-full cursor-pointer"
@click="scrollDirection('right')"
/>
<TabsToolRefresh
v-if="preferences.tabbar.showRefresh"
@refresh="refreshTab"

23
pnpm-lock.yaml generated
View File

@ -943,9 +943,6 @@ importers:
packages/effects/layouts:
dependencies:
'@radix-icons/vue':
specifier: ^1.0.0
version: 1.0.0(vue@3.4.37(typescript@5.5.4))
'@vben-core/layout-ui':
specifier: workspace:*
version: link:../../@core/ui-kit/layout-ui
@ -1297,42 +1294,36 @@ packages:
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@ast-grep/napi-linux-arm64-gnu@0.22.6':
resolution: {integrity: sha512-9PAqNJlAQfFm1RW0DVCM/S4gFHdppxUTWacB3qEeJZXgdLnoH0KGQa4z3Xo559SPYDKZy0VnY02mZ3XJ+v6/Vw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@ast-grep/napi-linux-x64-gnu@0.21.4':
resolution: {integrity: sha512-U7jl8RGpxKV+pjFstY0y5qD+D+wm9dXNO7NBbIOnETgTMizTFiUuQWT7SOlIklhcxxuXqWzfwhNN1qwI0tGNWw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@ast-grep/napi-linux-x64-gnu@0.22.6':
resolution: {integrity: sha512-nZf+gxXVrZqvP1LN6HwzOMA4brF3umBXfMequQzv8S6HeJ4c34P23F0Tw8mHtQpVYP9PQWJUvt3LJQ8Xvd5Hiw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@ast-grep/napi-linux-x64-musl@0.21.4':
resolution: {integrity: sha512-SOGR93kGomRR+Vh87+jXI3pJLR+J+dekCI8a4S22kGX9iAen8/+Ew++lFouDueKLyszmmhCrIk1WnJvYPuSFBw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [musl]
'@ast-grep/napi-linux-x64-musl@0.22.6':
resolution: {integrity: sha512-gcJeBMgJQf2pZZo0lgH0Vg4ycyujM7Am8VlomXhavC/dPpkddA1tiHSIC4fCNneLU1EqHITy3ALSmM4GLdsjBw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
libc: [musl]
'@ast-grep/napi-win32-arm64-msvc@0.21.4':
resolution: {integrity: sha512-ciGaTbkPjbCGqUyLwIPvcNeftNXjSG3cXE+5NiLThRbDhh2yUOE8YJkElUQcu0xQCdSlXnb4l/imEED/65jGfw==}
@ -3476,35 +3467,30 @@ packages:
engines: {node: '>= 10.0.0'}
cpu: [arm]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm64-glibc@2.4.1':
resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-arm64-musl@2.4.1':
resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
engines: {node: '>= 10.0.0'}
cpu: [arm64]
os: [linux]
libc: [musl]
'@parcel/watcher-linux-x64-glibc@2.4.1':
resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [glibc]
'@parcel/watcher-linux-x64-musl@2.4.1':
resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
engines: {node: '>= 10.0.0'}
cpu: [x64]
os: [linux]
libc: [musl]
'@parcel/watcher-wasm@2.4.1':
resolution: {integrity: sha512-/ZR0RxqxU/xxDGzbzosMjh4W6NdYFMqq2nvo2b8SLi7rsl/4jkL8S5stIikorNkdR50oVDvqb/3JT05WM+CRRA==}
@ -3684,55 +3670,46 @@ packages:
resolution: {integrity: sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==}
cpu: [arm]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm-musleabihf@4.20.0':
resolution: {integrity: sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==}
cpu: [arm]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-arm64-gnu@4.20.0':
resolution: {integrity: sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-arm64-musl@4.20.0':
resolution: {integrity: sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==}
cpu: [arm64]
os: [linux]
libc: [musl]
'@rollup/rollup-linux-powerpc64le-gnu@4.20.0':
resolution: {integrity: sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-riscv64-gnu@4.20.0':
resolution: {integrity: sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==}
cpu: [riscv64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-s390x-gnu@4.20.0':
resolution: {integrity: sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-gnu@4.20.0':
resolution: {integrity: sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==}
cpu: [x64]
os: [linux]
libc: [glibc]
'@rollup/rollup-linux-x64-musl@4.20.0':
resolution: {integrity: sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==}
cpu: [x64]
os: [linux]
libc: [musl]
'@rollup/rollup-win32-arm64-msvc@4.20.0':
resolution: {integrity: sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==}