fix: fix a series of known problems,fixed #54

2024-07-18 21:59:18 +08:00
parent 01e95e029f
commit 276ef2ebc3
36 changed files with 314 additions and 293 deletions
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -9,50 +9,20 @@ import { useContentHeightListener } from '@vben-core/hooks';
 interface Props {
  /**
   * 内容区域定宽
-   * @default 'wide'
   */
-  contentCompact?: ContentCompactType;
+  contentCompact: ContentCompactType;
  /**
   * 定宽布局宽度
-   * @default 1200
   */
-  contentCompactWidth?: number;
-  /**
-   * padding
-   * @default 16
-   */
-  padding?: number;
-  /**
-   * paddingBottom
-   * @default 16
-   */
-  paddingBottom?: number;
-  /**
-   * paddingLeft
-   * @default 16
-   */
-  paddingLeft?: number;
-  /**
-   * paddingRight
-   * @default 16
-   */
-  paddingRight?: number;
-  /**
-   * paddingTop
-   * @default 16
-   */
-  paddingTop?: number;
+  contentCompactWidth: number;
+  padding: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  paddingRight: number;
+  paddingTop: number;
 }

-const props = withDefaults(defineProps<Props>(), {
-  contentCompact: 'wide',
-  contentCompactWidth: 1200,
-  padding: 16,
-  paddingBottom: 16,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingTop: 16,
-});
+const props = withDefaults(defineProps<Props>(), {});

 const { contentElement } = useContentHeightListener();

@@ -83,7 +53,7 @@ const style = computed((): CSSProperties => {
 </script>

 <template>
-  <main ref="contentElement" :style="style" class="bg-background-content">
+  <main ref="contentElement" :style="style" class="bg-background-deep">
    <slot></slot>
  </main>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue
@@ -4,38 +4,21 @@ import { computed } from 'vue';

 interface Props {
  /**
-   * 是否固定在顶部
-   * @default true
+   * 是否固定在底部
   */
  fixed?: boolean;
-  /**
-   * 高度
-   * @default 32
-   */
-  height?: number;
+  height: number;
  /**
   * 是否显示
   * @default true
   */
  show?: boolean;
-  /**
-   * 高度
-   * @default 100%
-   */
-  width?: string;
-  /**
-   * zIndex
-   * @default 0
-   */
-  zIndex?: number;
+  width: string;
+  zIndex: number;
 }

 const props = withDefaults(defineProps<Props>(), {
-  fixed: true,
-  height: 32,
  show: true,
-  width: '100%',
-  zIndex: 0,
 });

 const style = computed((): CSSProperties => {
@@ -53,7 +36,7 @@ const style = computed((): CSSProperties => {
 <template>
  <footer
    :style="style"
-    class="bg-background-content bottom-0 w-full transition-all duration-200"
+    class="bg-background-deep bottom-0 w-full transition-all duration-200"
  >
    <slot></slot>
  </footer>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-header.vue
@@ -8,61 +8,45 @@ import { VbenIconButton } from '@vben-core/shadcn-ui';
 interface Props {
  /**
   * 横屏
-   * @default false
   */
-  fullWidth?: boolean;
+  fullWidth: boolean;
  /**
   * 高度
-   * @default 60
   */
-  height?: number;
+  height: number;
  /**
   * 是否混合导航
   * @default false
   */
-  isMixedNav?: boolean;
+  isMixedNav: boolean;
  /**
   * 是否移动端
-   * @default false
   */
-  isMobile?: boolean;
+  isMobile: boolean;
  /**
   * 是否显示
-   * @default true
   */
-  show?: boolean;
+  show: boolean;
  /**
   * 是否显示关闭菜单按钮
-   * @default true
   */
-  showToggleBtn?: boolean;
+  showToggleBtn: boolean;

  /**
   * 侧边菜单宽度
-   * @default 0
   */
-  sidebarWidth?: number;
+  sidebarWidth: number;
  /**
   * 宽度
-   * @default 100%
   */
-  width?: string;
+  width: string;
  /**
   * zIndex
-   * @default 0
   */
-  zIndex?: number;
+  zIndex: number;
 }

-const props = withDefaults(defineProps<Props>(), {
-  height: 60,
-  isMixedNav: false,
-  show: true,
-  showToggleBtn: false,
-  sidebarWidth: 0,
-  width: '100%',
-  zIndex: 0,
-});
+const props = withDefaults(defineProps<Props>(), {});

 const emit = defineEmits<{ openMenu: []; toggleSidebar: [] }>();

@@ -73,7 +57,6 @@ const style = computed((): CSSProperties => {
  const right = !show || !fullWidth ? undefined : 0;

  return {
-    // ...(props.isMixedNav ? { left: 0, position: `fixed` } : {}),
    height: `${height}px`,
    marginTop: show ? 0 : `-${height}px`,
    right,
@@ -87,11 +70,7 @@ const logoStyle = computed((): CSSProperties => {
 });

 function handleToggleMenu() {
-  if (props.isMobile) {
-    emit('openMenu');
-  } else {
-    emit('toggleSidebar');
-  }
+  props.isMobile ? emit('openMenu') : emit('toggleSidebar');
 }
 </script>

--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -9,7 +9,7 @@ import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
 interface Props {
  /**
   * 折叠区域高度
-   * @default 32
+   * @default 42
   */
  collapseHeight?: number;
  /**
@@ -41,6 +41,11 @@ interface Props {
   * @default false
   */
  isSidebarMixed?: boolean;
+  /**
+   * 顶部margin
+   * @default 60
+   */
+  marginTop?: number;
  /**
   * 混合菜单宽度
   * @default 80
@@ -85,8 +90,9 @@ const props = withDefaults(defineProps<Props>(), {
  extraWidth: 180,
  fixedExtra: false,
  isSidebarMixed: false,
-  mixedWidth: 80,
-  paddingTop: 60,
+  marginTop: 0,
+  mixedWidth: 70,
+  paddingTop: 0,
  show: true,
  showCollapseButton: true,
  theme: 'dark',
@@ -108,11 +114,13 @@ const asideRef = shallowRef<HTMLDivElement | null>();
 const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));

 const style = computed((): CSSProperties => {
-  const { isSidebarMixed, paddingTop, zIndex } = props;
+  const { isSidebarMixed, marginTop, paddingTop, zIndex } = props;

  return {
    '--scroll-shadow': 'var(--sidebar)',
    ...calcMenuWidthStyle(false),
+    height: `calc(100% - ${marginTop}px)`,
+    marginTop: `${marginTop}px`,
    paddingTop: `${paddingTop}px`,
    zIndex,
    ...(isSidebarMixed && extraVisible.value ? { transition: 'none' } : {}),
@@ -222,6 +230,7 @@ function handleMouseleave() {
  if (expandOnHover.value) {
    return;
  }
+
  expandOnHovering.value = false;
  collapse.value = true;
  extraVisible.value = false;
@@ -233,7 +242,7 @@ function handleMouseleave() {
    v-if="domVisible"
    :class="theme"
    :style="hiddenSideStyle"
-    class="h-full transition-all duration-200"
+    class="h-full transition-all duration-150"
  ></div>
  <aside
    :class="[
@@ -244,7 +253,7 @@ function handleMouseleave() {
      },
    ]"
    :style="style"
-    class="border-border fixed left-0 top-0 h-full border-r transition-all duration-200"
+    class="border-border fixed left-0 top-0 h-full border-r transition-all duration-150"
    @mouseenter="handleMouseenter"
    @mouseleave="handleMouseleave"
  >
@@ -255,7 +264,7 @@ function handleMouseleave() {
    <div v-if="slots.logo" :style="headerStyle">
      <slot name="logo"></slot>
    </div>
-    <VbenScrollbar :style="contentStyle" shadow>
+    <VbenScrollbar :style="contentStyle" shadow shadow-border>
      <slot></slot>
    </VbenScrollbar>

@@ -267,8 +276,11 @@ function handleMouseleave() {
    <div
      v-if="isSidebarMixed"
      ref="asideRef"
+      :class="{
+        'border-r': extraVisible,
+      }"
      :style="extraStyle"
-      class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-x transition-all duration-200"
+      class="border-border bg-sidebar fixed top-0 h-full overflow-hidden transition-all duration-200"
    >
      <SidebarCollapseButton
        v-if="isSidebarMixed && expandOnHover"
@@ -286,6 +298,7 @@ function handleMouseleave() {
        :style="extraContentStyle"
        class="border-border border-t py-2"
        shadow
+        shadow-border
      >
        <slot name="extra"></slot>
      </VbenScrollbar>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -5,15 +5,11 @@ import { computed } from 'vue';
 interface Props {
  /**
   * 高度
-   * @default 30
   */
-  height?: number;
+  height: number;
 }

-const props = withDefaults(defineProps<Props>(), {
-  fixed: true,
-  height: 38,
-});
+const props = withDefaults(defineProps<Props>(), {});

 const style = computed((): CSSProperties => {
  const { height } = props;