Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

2024-08-13 22:12:15 +08:00
parent 895b5bc8d0 3b0f72330a
commit abf863dcda
44 changed files with 150 additions and 187 deletions
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -59,6 +59,11 @@ const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse');
 const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });

+// side是否处于hover状态展开菜单中
+const sidebarExpandOnHovering = ref(false);
+const headerIsHidden = ref(false);
+const contentRef = ref();
+
 const {
  arrivedState,
  directions,
@@ -66,11 +71,7 @@ const {
  y: scrollY,
 } = useScroll(document);

-const { y: mouseY } = useMouse({ type: 'client' });
-
-// side是否处于hover状态展开菜单中
-const sidebarExpandOnHovering = ref(false);
-const headerIsHidden = ref(false);
+const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });

 const realLayout = computed(() =>
  props.isMobile ? 'sidebar-nav' : props.layout,
@@ -507,6 +508,7 @@ function handleOpenMenu() {
    </LayoutSidebar>

    <div
+      ref="contentRef"
      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
    >
      <div
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -542,15 +542,6 @@ $namespace: vben;
      }

      & > .#{$namespace}-sub-menu {
-        // .#{$namespace}-menu {
-        //   background: var(--menu-submenu-opened-background-color);
-
-        //   .#{$namespace}-sub-menu,
-        //   .#{$namespace}-menu-item:not(.is-active),
-        //   .#{$namespace}-sub-menu-content:not(.is-active) {
-        //     background: var(--menu-submenu-opened-background-color);
-        //   }
-        // }
        & > .#{$namespace}-menu {
          & > .#{$namespace}-menu-item {
            padding-left: calc(
@@ -713,13 +704,11 @@ $namespace: vben;

 .#{$namespace}-menu-item {
  fill: var(--menu-item-color);
-  stroke: var(--menu-item-color);

  @include menu-item;

  &.is-active {
    fill: var(--menu-item-active-color);
-    stroke: var(--menu-item-active-color);

    @include menu-item-active;
  }
@@ -783,7 +772,6 @@ $namespace: vben;
  list-style: none;
  background: var(--menu-submenu-background-color);
  fill: var(--menu-item-color);
-  stroke: var(--menu-item-color);

  &.is-active {
    div[data-state='open'] > .#{$namespace}-sub-menu-content,
@@ -794,7 +782,6 @@ $namespace: vben;
      cursor: pointer;
      background: var(--menu-submenu-active-background-color);
      fill: var(--menu-submenu-active-color);
-      stroke: var(--menu-submenu-active-color);
    }
  }
 }
--- a/packages/@core/ui-kit/menu-ui/src/interface/index.ts
+++ b/packages/@core/ui-kit/menu-ui/src/interface/index.ts
@@ -1,6 +1,6 @@
 import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';

-import type { Ref } from 'vue';
+import type { Component, Ref } from 'vue';

 interface MenuProps {
  /**
@@ -61,7 +61,7 @@ interface SubMenuProps extends MenuRecordBadgeRaw {
  /**
   * @zh_CN 图标
   */
-  icon?: string;
+  icon?: Component | string;
  /**
   * @zh_CN submenu 名称
   */
@@ -80,7 +80,7 @@ interface MenuItemProps extends MenuRecordBadgeRaw {
  /**
   * @zh_CN 图标
   */
-  icon?: string;
+  icon?: Component | string;
  /**
   * @zh_CN menuitem 名称
   */
@@ -93,10 +93,6 @@ interface MenuItemRegistered {
  path: string;
 }

-// export interface MenuItemClicked {
-//   name: string;
-// }
-
 interface MenuItemClicked {
  parentPaths: string[];
  path: string;
--- a/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
@@ -31,12 +31,6 @@ const hasChildren = computed(() => {
    Reflect.has(menu, 'children') && !!menu.children && menu.children.length > 0
  );
 });
-
-// function menuIcon(menu: MenuRecordRaw) {
-//   return props.activePath === menu.path
-//     ? menu.activeIcon || menu.icon
-//     : menu.icon;
-// }
 </script>

 <template>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@@ -13,9 +13,9 @@ interface Props extends BacktopProps {}
 defineOptions({ name: 'BackTop' });

 const props = withDefaults(defineProps<Props>(), {
-  bottom: 24,
+  bottom: 20,
  isGroup: false,
-  right: 40,
+  right: 24,
  target: '',
  visibilityHeight: 200,
 });
@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
    <VbenButton
      v-if="visible"
      :style="backTopStyle"
-      class="bg-accent hover:bg-heavy data fixed bottom-10 right-5 z-[1000] h-10 w-10 rounded-full"
+      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] h-10 w-10 rounded-full duration-500"
      size="icon"
      variant="icon"
      @click="handleClick"
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
@@ -1,5 +1,7 @@
+import type { Component } from 'vue';
+
 interface IBreadcrumb {
-  icon?: string;
+  icon?: Component | string;
  isHome?: boolean;
  items?: IBreadcrumb[];
  path?: string;
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
@@ -33,7 +33,7 @@ const inputClass = computed(() => {
      v-model="modelValue"
      :class="[props.class, inputClass]"
      autocomplete="off"
-      class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground/60 focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
      required
      type="text"
      v-bind="$attrs"
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -108,9 +108,6 @@ function scrollIntoView() {
                <div
                  class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
                >
-                  <!-- <div
-                  class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
-                > -->
                  <!-- close-icon -->
                  <X
                    v-show="
@@ -130,9 +127,6 @@ function scrollIntoView() {
                <div
                  class="text-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
                >
-                  <!-- <div
-                  class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"
-                > -->
                  <VbenIcon
                    v-if="showIcon"
                    :icon="tab.icon"