框架

2024-10-09 19:02:44 +08:00 · 2024-10-09 19:02:44 +08:00 · fe47552c5a
parent 201ec0e895
commit fe47552c5a
4 changed files with 53 additions and 106 deletions
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@ -18,7 +18,7 @@ import {
 } from './components';
 import { useLayout } from './hooks/use-layout';

-interface Props extends VbenLayoutProps {}
+interface Props extends VbenLayoutProps { }

 defineOptions({
  name: 'VbenLayout',
@ -120,7 +120,6 @@ const sidebarEnableState = computed(() => {
 */
 const sidebarMarginTop = computed(() => {
  const { headerHeight, isMobile } = props;
-  console.log(props);
  return (isMixedNav.value && !isMobile) ||
    currentLayout.value === 'sidebar-topbar'
    ? headerHeight
@ -245,9 +244,9 @@ const tabbarStyle = computed((): CSSProperties => {
  let marginLeft = 0;

  // 如果不是混合导航，tabbar 的宽度为 100%
-  if (!isMixedNav.value || props.sidebarHidden) {
+  if ((!isMixedNav.value || props.sidebarHidden) && currentLayout.value !== 'sidebar-topbar') {
    width = '100%';
-  } else if (sidebarEnable.value) {
+  } else if (sidebarEnable.value ) {
    // 鼠标在侧边栏上时，且侧边栏展开时的宽度
    const onHoveringWidth = sidebarExpandOnHover.value
      ? props.sidebarWidth
@ -278,9 +277,9 @@ const contentStyle = computed((): CSSProperties => {
  return {
    marginTop:
      fixed &&
-      !isFullContent.value &&
-      !headerIsHidden.value &&
-      (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
+        !isFullContent.value &&
+        !headerIsHidden.value &&
+        (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
        ? `${headerWrapperHeight.value}px`
        : 0,
    paddingBottom: `${footerEnable && footerFixed ? footerHeight : 0}px`,
@ -448,31 +447,15 @@ function handleHeaderToggle() {

 <template>
  <div class="relative flex min-h-full w-full">
-    <LayoutSidebar
-      v-if="sidebarEnableState"
-      v-model:collapse="sidebarCollapse"
-      v-model:expand-on-hover="sidebarExpandOnHover"
-      v-model:expand-on-hovering="sidebarExpandOnHovering"
-      v-model:extra-collapse="sidebarExtraCollapse"
-      v-model:extra-visible="sidebarExtraVisible"
-      :collapse-width="getSideCollapseWidth"
-      :dom-visible="!isMobile"
-      :extra-width="sidebarExtraWidth"
-      :fixed-extra="sidebarExpandOnHover"
-      :header-height="isMixedNav ? 0 : headerHeight"
-      :is-sidebar-mixed="isSidebarMixedNav"
-      :margin-top="sidebarMarginTop"
-      :mixed-width="sidebarMixedWidth"
-      :show="showSidebar"
-      :theme="sidebarTheme"
-      :width="getSidebarWidth"
-      :z-index="sidebarZIndex"
-      @leave="() => emit('sideMouseLeave')"
-    >
-      <template
-        v-if="isSideMode && !isMixedNav && currentLayout !== 'sidebar-topbar'"
-        #logo
-      >
+    <LayoutSidebar v-if="sidebarEnableState" v-model:collapse="sidebarCollapse"
+      v-model:expand-on-hover="sidebarExpandOnHover" v-model:expand-on-hovering="sidebarExpandOnHovering"
+      v-model:extra-collapse="sidebarExtraCollapse" v-model:extra-visible="sidebarExtraVisible"
+      :collapse-width="getSideCollapseWidth" :dom-visible="!isMobile" :extra-width="sidebarExtraWidth"
+      :fixed-extra="sidebarExpandOnHover" :header-height="isMixedNav ? 0 : headerHeight"
+      :is-sidebar-mixed="isSidebarMixedNav" :margin-top="sidebarMarginTop" :mixed-width="sidebarMixedWidth"
+      :show="showSidebar" :theme="sidebarTheme" :width="getSidebarWidth" :z-index="sidebarZIndex"
+      @leave="() => emit('sideMouseLeave')">
+      <template v-if="isSideMode && !isMixedNav && currentLayout !== 'sidebar-topbar'" #logo>
        <slot name="logo"></slot>
      </template>

@ -491,65 +474,35 @@ function handleHeaderToggle() {
      </template>
    </LayoutSidebar>

-    <div
-      ref="contentRef"
-      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
-    >
-      <div
-        :class="{
-          'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
-        }"
-        :style="headerWrapperStyle"
-        class="overflow-hidden transition-all duration-200"
-      >
-        <LayoutHeader
-          v-if="headerVisible"
-          :full-width="!isSideMode"
-          :height="headerHeight"
-          :is-mobile="isMobile"
-          :show="!isFullContent && !headerHidden"
-          :sidebar-width="sidebarWidth"
-          :theme="headerTheme"
-          :width="mainStyle.width"
-          :z-index="headerZIndex"
-        >
+    <div ref="contentRef" class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in">
+      <div :class="{
+        'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
+      }" :style="headerWrapperStyle" class="overflow-hidden transition-all duration-200">
+        <LayoutHeader v-if="headerVisible" :full-width="!isSideMode" :height="headerHeight" :is-mobile="isMobile"
+          :show="!isFullContent && !headerHidden" :sidebar-width="sidebarWidth" :theme="headerTheme"
+          :width="mainStyle.width" :z-index="headerZIndex">
          <template v-if="showHeaderLogo" #logo>
            <slot name="logo"></slot>
          </template>

          <template #toggle-button>
-            <VbenIconButton
-              v-if="showHeaderToggleButton"
-              class="my-0 ml-2 mr-1 rounded-md"
-              @click="handleHeaderToggle"
-            >
+            <VbenIconButton v-if="showHeaderToggleButton" class="my-0 ml-2 mr-1 rounded-md" @click="handleHeaderToggle">
              <Menu class="size-4" />
            </VbenIconButton>
          </template>
          <slot name="header"></slot>
        </LayoutHeader>

-        <LayoutTabbar
-          v-if="tabbarEnable"
-          :height="tabbarHeight"
-          :style="tabbarStyle"
-        >
+        <LayoutTabbar v-if="tabbarEnable" :height="tabbarHeight" :style="tabbarStyle">
          <slot name="tabbar"></slot>
        </LayoutTabbar>
      </div>

      <!-- </div> -->
-      <LayoutContent
-        :content-compact="contentCompact"
-        :content-compact-width="contentCompactWidth"
-        :padding="contentPadding"
-        :padding-bottom="contentPaddingBottom"
-        :padding-left="contentPaddingLeft"
-        :padding-right="contentPaddingRight"
-        :padding-top="contentPaddingTop"
-        :style="contentStyle"
-        class="transition-[margin-top] duration-200"
-      >
+      <LayoutContent :content-compact="contentCompact" :content-compact-width="contentCompactWidth"
+        :padding="contentPadding" :padding-bottom="contentPaddingBottom" :padding-left="contentPaddingLeft"
+        :padding-right="contentPaddingRight" :padding-top="contentPaddingTop" :style="contentStyle"
+        class="transition-[margin-top] duration-200">
        <slot name="content"></slot>

        <template #overlay>
@ -557,23 +510,14 @@ function handleHeaderToggle() {
        </template>
      </LayoutContent>

-      <LayoutFooter
-        v-if="footerEnable"
-        :fixed="footerFixed"
-        :height="footerHeight"
-        :show="!isFullContent"
-        :width="footerWidth"
-        :z-index="zIndex"
-      >
+      <LayoutFooter v-if="footerEnable" :fixed="footerFixed" :height="footerHeight" :show="!isFullContent"
+        :width="footerWidth" :z-index="zIndex">
        <slot name="footer"></slot>
      </LayoutFooter>
    </div>
    <slot name="extra"></slot>
-    <div
-      v-if="maskVisible"
-      :style="maskStyle"
+    <div v-if="maskVisible" :style="maskStyle"
      class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
-      @click="handleClickMask"
-    ></div>
+      @click="handleClickMask"></div>
  </div>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@ -26,6 +26,10 @@ interface Props {
   * @zh_CN Logo 主题
   */
  theme?: string;
+  /**
+   * logo字体颜色
+   */
+  textClass?: string;
 }

 defineOptions({
@ -43,21 +47,10 @@ withDefaults(defineProps<Props>(), {

 <template>
  <div :class="theme" class="flex h-full items-center text-lg">
-    <a
-      :class="$attrs.class"
-      :href="href"
-      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
-    >
-      <VbenAvatar
-        v-if="src"
-        :alt="text"
-        :src="src"
-        class="relative w-8 rounded-none bg-transparent"
-      />
-      <span
-        v-if="!collapsed"
-        class="text-foreground truncate text-nowrap font-semibold"
-      >
+    <a :class="$attrs.class" :href="href"
+      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500">
+      <VbenAvatar v-if="src" :alt="text" :src="src" class="relative w-8 rounded-none bg-transparent" />
+      <span v-if="!collapsed" class="text-foreground truncate text-nowrap font-semibold" :class="textClass">
        {{ text }}
      </span>
    </a>
--- a/packages/effects/layouts/src/widgets/notification/notification.vue
+++ b/packages/effects/layouts/src/widgets/notification/notification.vue
@ -21,6 +21,10 @@ interface Props {
   * 消息列表
   */
  notifications?: NotificationItem[];
+  /**
+   * 图标颜色
+   */
+  icColor?:string;
 }

 defineOptions({ name: 'NotificationPopup' });
@ -70,9 +74,9 @@ function handleClick(item: NotificationItem) {
        <VbenIconButton class="bell-button text-foreground relative">
          <span
            v-if="dot"
-            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
+            class="bg-[#ef4444] absolute right-0.5 top-0.5 h-2 w-2 rounded"
          ></span>
-          <Bell class="size-4" />
+          <Bell class="size-4" :style="{ color: icColor}" />
        </VbenIconButton>
      </div>
    </template>
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@ -53,6 +53,10 @@ interface Props {
   * 文本
   */
  text?: string;
+  /**
+   * 是否隐藏锁定屏幕
+   */
+  hideLockLcreen?: boolean
 }

 defineOptions({
@ -196,7 +200,8 @@ if (enableShortcutKey.value) {
        <VbenIcon :icon="menu.icon" class="mr-2 size-4" />
        {{ menu.text }}
      </DropdownMenuItem>
-      <DropdownMenuSeparator />
+      <template v-if="!hideLockLcreen">
+        <DropdownMenuSeparator />
      <DropdownMenuItem
        v-if="preferences.widget.lockScreen"
        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
@ -208,6 +213,7 @@ if (enableShortcutKey.value) {
          {{ altView }} L
        </DropdownMenuShortcut>
      </DropdownMenuItem>
+      </template>
      <DropdownMenuSeparator />
      <DropdownMenuItem
        class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"