fix: shake when adding tabs

packages/@core/shared/constants/src/global.ts

@@ -1,12 +0,0 @@
-/**
- * @zh_CN 布局内容高度 css变量
- * @en_US Layout content height
- */
-const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;
-
-/**
- * @zh_CN 默认命名空间
- */
-const DEFAULT_NAMESPACE = 'vben';
-
-export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, DEFAULT_NAMESPACE };

packages/@core/shared/constants/src/globals.ts

@@ -0,0 +1,10 @@
+/**
+ * @zh_CN 布局内容高度 css变量
+ * @en_US Layout content height
+ */
+export const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;
+
+/**
+ * @zh_CN 默认命名空间
+ */
+export const DEFAULT_NAMESPACE = 'vben';

packages/@core/shared/constants/src/index.ts

@@ -1,2 +1,2 @@
-export * from './global';
+export * from './globals';
 export * from './vben';

packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue

@@ -26,7 +26,7 @@ const style = computed((): CSSProperties => {
 <template>
   <section
     :style="style"
-    class="border-border bg-background flex w-full border-b"
+    class="border-border bg-background flex w-full border-b transition-all duration-[100ms]"
   >
     <slot></slot>
   </section>

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -219,9 +219,12 @@ const maskVisible = computed(() => !sidebarCollapse.value && props.isMobile);
  * header fixed值
  */
 const headerFixed = computed(() => {
+  const { headerMode } = props;
   return (
     isMixedNav.value ||
-    ['auto', 'auto-scroll', 'fixed'].includes(props.headerMode)
+    headerMode === 'fixed' ||
+    headerMode === 'auto-scroll' ||
+    headerMode === 'auto'
   );
 });
 
@@ -230,7 +233,8 @@ const mainStyle = computed(() => {
   let sidebarAndExtraWidth = 'unset';
   if (
     headerFixed.value &&
-    !['header-nav', 'mixed-nav'].includes(realLayout.value) &&
+    realLayout.value !== 'header-nav' &&
+    realLayout.value !== 'mixed-nav' &&
     showSidebar.value &&
     !props.isMobile
   ) {
@@ -272,16 +276,9 @@ const tabbarStyle = computed((): CSSProperties => {
   if (!isMixedNav.value) {
     width = '100%';
   } else if (sidebarEnable.value) {
-    const hoverWidth =
-      sidebarExpandOnHovering.value && !sidebarExpandOnHover.value
-        ? props.sidebarWidth
-        : getSideCollapseWidth.value;
-
-    const runtimeWidth = isMixedNav.value ? hoverWidth : props.sidebarWidth;
-
     marginLeft = sidebarCollapse.value
       ? getSideCollapseWidth.value
-      : runtimeWidth;
+      : props.sidebarWidth;
 
     width = `calc(100% - ${getSidebarWidth.value}px)`;
   } else {

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

@@ -39,23 +39,6 @@ const style = computed(() => {
   };
 });
 
-// const layout = () => {
-//   const { maxWidth, minWidth } = props;
-//   if (!contentRef.value) {
-//     return Math.max(maxWidth, minWidth);
-//   }
-//   // const contentWidth = contentRef.value.clientWidth - gap * 3;
-//   // let width = contentWidth / tabs.length;
-//   // width += gap * 2;
-//   // if (width > maxWidth) {
-//   //   width = maxWidth;
-//   // }
-//   // if (width < minWidth) {
-//   //   width = minWidth;
-//   // }
-//   tabWidth.value = maxWidth;
-// };
-
 const tabsView = computed((): TabConfig[] => {
   return props.tabs.map((tab) => {
     return {
@@ -71,23 +54,10 @@ const tabsView = computed((): TabConfig[] => {
   });
 });
 
-// watch(
-//   () => props.tabs,
-//   () => {
-//     nextTick(() => {
-//       layout();
-//     });
-//   },
-// );
-
 watch(active, () => {
   scrollIntoView();
 });
 
-// onMounted(() => {
-//   layout();
-// });
-
 function handleClose(key: string) {
   emit('close', key);
 }
@@ -114,9 +84,9 @@ function scrollIntoView() {
       <div
         ref="contentRef"
         :class="contentClass"
-        class="relative !flex h-[calc(100%-1px)] w-max"
+        class="relative !flex h-[calc(100%-2px)] w-max"
       >
-        <TransitionGroup name="slide-down">
+        <TransitionGroup name="slide-up">
           <div
             v-for="(tab, i) in tabsView"
             :key="tab.key"

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

@@ -85,7 +85,7 @@ function scrollIntoView() {
         :class="contentClass"
         class="relative !flex h-full w-max items-center"
       >
-        <TransitionGroup name="slide-down">
+        <TransitionGroup name="slide-up">
           <div
             v-for="(tab, i) in tabsView"
             :key="tab.key"