fix: fix known problems

2024-07-16 00:14:24 +08:00
parent cf16c7bdde
commit 09fa2af23d
21 changed files with 242 additions and 697 deletions
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -272,9 +272,17 @@ 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
-      : props.sidebarWidth;
+      : runtimeWidth;
+
    width = `calc(100% - ${getSidebarWidth.value}px)`;
  } else {
    width = '100%';
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@@ -30,7 +30,7 @@ const isTopLevelMenuItem = computed(
  () => parentMenu.value?.type.name === 'Menu',
 );

-const getCollapseShowTitle = computed(
+const collapseShowTitle = computed(
  () =>
    rootMenu.props?.collapseShowTitle &&
    isTopLevelMenuItem.value &&
@@ -78,20 +78,25 @@ onBeforeUnmount(() => {
 <template>
  <li
    :class="[
+      rootMenu.theme,
      b(),
      is('active', active),
      is('disabled', disabled),
-      is('collapse-show-title', getCollapseShowTitle),
+      is('collapse-show-title', collapseShowTitle),
    ]"
    role="menuitem"
    @click.stop="handleClick"
  >
-    <VbenTooltip v-if="showTooltip" side="right">
+    <VbenTooltip
+      v-if="showTooltip"
+      :content-class="[rootMenu.theme]"
+      side="right"
+    >
      <template #trigger>
        <div :class="[nsMenu.be('tooltip', 'trigger')]">
          <VbenIcon :class="nsMenu.e('icon')" :icon="icon" fallback />
          <slot></slot>
-          <span v-if="getCollapseShowTitle" :class="nsMenu.e('name')">
+          <span v-if="collapseShowTitle" :class="nsMenu.e('name')">
            <slot name="title"></slot>
          </span>
        </div>
@@ -99,9 +104,11 @@ onBeforeUnmount(() => {
      <slot name="title"></slot>
    </VbenTooltip>
    <div v-show="!showTooltip" :class="[e('content')]">
-      <VbenMenuBadge v-bind="props" />
+      <VbenMenuBadge
+        v-if="rootMenu.props.mode !== 'horizontal'"
+        v-bind="props"
+      />
      <VbenIcon :class="nsMenu.e('icon')" :icon="icon" fallback />
-
      <slot></slot>
      <slot name="title"></slot>
    </div>
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -437,20 +437,18 @@ $namespace: vben;
  --menu-item-radius: 0px;
  --menu-item-indent: 16px;
  --menu-font-size: 14px;
-  --menu-dark-background: 0deg 0% 100% / 10%;
-  --menu-light-background: 192deg 1% 93%;

  &.is-dark {
-    --menu-background-color: hsl(var(--menu-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-hover-color: hsl(var(--primary-foreground));
-    --menu-item-hover-background-color: hsl(var(--menu-dark-background));
+    --menu-item-hover-background-color: hsl(var(--accent));
    --menu-item-active-color: hsl(var(--foreground));
-    --menu-item-active-background-color: hsl(var(--menu-dark-background));
+    --menu-item-active-background-color: hsl(var(--accent));
    --menu-submenu-hover-color: hsl(var(--foreground));
-    --menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
+    --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);
@@ -462,11 +460,11 @@ $namespace: vben;
    --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(--menu-light-background));
+    --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-hover-color: hsl(var(--primary));
-    --menu-submenu-hover-background-color: hsl(var(--menu-light-background));
+    --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);
@@ -499,24 +497,24 @@ $namespace: vben;

    &.is-dark {
      --menu-item-hover-color: var(--foreground);
-      --menu-item-hover-background-color: hsl(var(--menu-dark-background));
+      --menu-item-hover-background-color: hsl(var(--accent));
      --menu-item-active-color: hsl(var(--foreground));
-      --menu-item-active-background-color: hsl(var(--menu-dark-background));
+      --menu-item-active-background-color: hsl(var(--accent));
      --menu-submenu-active-color: hsl(var(--foreground));
-      --menu-submenu-active-background-color: hsl(var(--menu-dark-background));
+      --menu-submenu-active-background-color: hsl(var(--accent));
      --menu-submenu-hover-color: hsl(var(--foreground));
-      --menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
+      --menu-submenu-hover-background-color: hsl(var(--accent));
    }

    &.is-light {
-      --menu-item-active-color: hsl(var(--foreground));
-      --menu-item-active-background-color: hsl(var(--menu-light-background));
-      --menu-item-hover-background-color: hsl(var(--menu-light-background));
+      --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-hover-color: hsl(var(--primary));
-      --menu-submenu-hover-background-color: hsl(var(--menu-light-background));
+      --menu-submenu-hover-background-color: hsl(var(--accent));
    }
  }
 }
--- a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -203,6 +203,7 @@ onBeforeUnmount(() => {
    <template v-if="rootMenu.isMenuPopup">
      <VbenHoverCard
        :content-class="[
+          rootMenu.theme,
          nsMenu.e('popup-container'),
          is(rootMenu.theme, true),
          opened ? '' : 'hidden',
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
 import {
  Tooltip,
  TooltipContent,
@@ -9,6 +11,7 @@ import {
 import { TooltipContentProps } from 'radix-vue';

 interface Props {
+  contentClass?: HTMLAttributes['class'];
  delayDuration?: number;
  side: TooltipContentProps['side'];
 }
@@ -26,6 +29,7 @@ withDefaults(defineProps<Props>(), {
        <slot name="trigger"></slot>
      </TooltipTrigger>
      <TooltipContent
+        :class="contentClass"
        :side="side"
        class="side-content text-popover-foreground bg-popover"
      >
--- 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
@@ -3,7 +3,7 @@ import type { TabDefinition } from '@vben-core/typings';

 import type { TabConfig, TabsProps } from '../../types';

-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';

 import { IcRoundClose, MdiPin } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
@@ -30,7 +30,7 @@ const active = defineModel<string>('active');

 const contentRef = ref();
 const tabRef = ref();
-const tabWidth = ref<number>(0);
+const tabWidth = ref<number>(props.maxWidth);

 const style = computed(() => {
  const { gap } = props;
@@ -39,22 +39,22 @@ 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 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) => {
@@ -71,19 +71,23 @@ const tabsView = computed((): TabConfig[] => {
  });
 });

-watch(
-  () => props.tabs,
-  () => {
-    nextTick(() => {
-      layout();
-    });
-  },
-);
+// watch(
+//   () => props.tabs,
+//   () => {
+//     nextTick(() => {
+//       layout();
+//     });
+//   },
+// );

-onMounted(() => {
-  layout();
+watch(active, () => {
+  scrollIntoView();
 });

+// onMounted(() => {
+//   layout();
+// });
+
 function handleClose(key: string) {
  emit('close', key);
 }
@@ -91,6 +95,16 @@ function handleClose(key: string) {
 function handleUnpinTab(tab: TabConfig) {
  emit('unpin', tab);
 }
+
+function scrollIntoView() {
+  setTimeout(() => {
+    const element = document.querySelector(`.tabs-chrome__item.is-active`);
+
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  });
+}
 </script>

 <template>
@@ -100,7 +114,7 @@ function handleUnpinTab(tab: TabConfig) {
      <div
        ref="contentRef"
        :class="contentClass"
-        class="relative !flex h-full w-max"
+        class="relative !flex h-[calc(100%-1px)] w-max"
      >
        <TransitionGroup name="slide-down">
          <div
@@ -110,6 +124,7 @@ function handleUnpinTab(tab: TabConfig) {
            :class="[
              { 'is-active': tab.key === active, dragable: !tab.affixTab },
            ]"
+            :data-active-tab="active"
            :data-index="i"
            :style="{
              width: `${tabWidth}px`,
@@ -138,14 +153,14 @@ function handleUnpinTab(tab: TabConfig) {
                    class="tabs-chrome__background-content h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150"
                  ></div>
                  <svg
-                    class="tabs-chrome__background-before absolute bottom-[-1px] left-[-1px] fill-transparent transition-all duration-150"
+                    class="tabs-chrome__background-before absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150"
                    height="7"
                    width="7"
                  >
                    <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
                  </svg>
                  <svg
-                    class="tabs-chrome__background-after absolute bottom-[-1px] right-[-1px] fill-transparent transition-all duration-150"
+                    class="tabs-chrome__background-after absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150"
                    height="7"
                    width="7"
                  >
@@ -198,7 +213,7 @@ function handleUnpinTab(tab: TabConfig) {
        </TransitionGroup>
      </div>
      <!-- footer -->
-      <div class="bg-background h-1"></div>
+      <!-- <div class="bg-background h-1"></div> -->
    </VbenScrollbar>
  </div>
 </template>
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { TabConfig, TabsProps } from '../../types';

-import { computed } from 'vue';
+import { computed, watch } from 'vue';

 import { IcRoundClose, MdiPin } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
@@ -55,6 +55,10 @@ const tabsView = computed((): TabConfig[] => {
  });
 });

+watch(active, () => {
+  scrollIntoView();
+});
+
 function handleClose(key: string) {
  emit('close', key);
 }
@@ -62,6 +66,16 @@ function handleClose(key: string) {
 function handleUnpinTab(tab: TabConfig) {
  emit('unpin', tab);
 }
+
+function scrollIntoView() {
+  setTimeout(() => {
+    const element = document.querySelector(`.tabs-chrome__item.is-active`);
+
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  });
+}
 </script>

 <template>
@@ -83,7 +97,7 @@ function handleUnpinTab(tab: TabConfig) {
              typeWithClass.content,
            ]"
            :data-index="i"
-            class="[&:not(.is-active)]:hover:bg-accent group relative flex cursor-pointer select-none transition-all duration-300"
+            class="tabs-chrome__item [&:not(.is-active)]:hover:bg-accent group relative flex cursor-pointer select-none transition-all duration-300"
            @click="active = tab.key"
          >
            <VbenContextMenu