框架

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 &&
+        !isFullContent.value &&
-      !headerIsHidden.value &&
+        !headerIsHidden.value &&
-      (!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.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
+    <LayoutSidebar v-if="sidebarEnableState" v-model:collapse="sidebarCollapse"
-      v-if="sidebarEnableState"
+      v-model:expand-on-hover="sidebarExpandOnHover" v-model:expand-on-hovering="sidebarExpandOnHovering"
-      v-model:collapse="sidebarCollapse"
+      v-model:extra-collapse="sidebarExtraCollapse" v-model:extra-visible="sidebarExtraVisible"
-      v-model:expand-on-hover="sidebarExpandOnHover"
+      :collapse-width="getSideCollapseWidth" :dom-visible="!isMobile" :extra-width="sidebarExtraWidth"
-      v-model:expand-on-hovering="sidebarExpandOnHovering"
+      :fixed-extra="sidebarExpandOnHover" :header-height="isMixedNav ? 0 : headerHeight"
-      v-model:extra-collapse="sidebarExtraCollapse"
+      :is-sidebar-mixed="isSidebarMixedNav" :margin-top="sidebarMarginTop" :mixed-width="sidebarMixedWidth"
-      v-model:extra-visible="sidebarExtraVisible"
+      :show="showSidebar" :theme="sidebarTheme" :width="getSidebarWidth" :z-index="sidebarZIndex"
-      :collapse-width="getSideCollapseWidth"
+      @leave="() => emit('sideMouseLeave')">
-      :dom-visible="!isMobile"
+      <template v-if="isSideMode && !isMixedNav && currentLayout !== 'sidebar-topbar'" #logo>
-      :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
+    <div ref="contentRef" class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in">
-      ref="contentRef"
+      <div :class="{
-      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
+        'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
-    >
+      }" :style="headerWrapperStyle" class="overflow-hidden transition-all duration-200">
-      <div
+        <LayoutHeader v-if="headerVisible" :full-width="!isSideMode" :height="headerHeight" :is-mobile="isMobile"
-        :class="{
+          :show="!isFullContent && !headerHidden" :sidebar-width="sidebarWidth" :theme="headerTheme"
-          'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
+          :width="mainStyle.width" :z-index="headerZIndex">
-        }"
-        :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
+            <VbenIconButton v-if="showHeaderToggleButton" class="my-0 ml-2 mr-1 rounded-md" @click="handleHeaderToggle">
-              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
+        <LayoutTabbar v-if="tabbarEnable" :height="tabbarHeight" :style="tabbarStyle">
-          v-if="tabbarEnable"
-          :height="tabbarHeight"
-          :style="tabbarStyle"
-        >
           <slot name="tabbar"></slot>
         </LayoutTabbar>
       </div>
 
       <!-- </div> -->
-      <LayoutContent
+      <LayoutContent :content-compact="contentCompact" :content-compact-width="contentCompactWidth"
-        :content-compact="contentCompact"
+        :padding="contentPadding" :padding-bottom="contentPaddingBottom" :padding-left="contentPaddingLeft"
-        :content-compact-width="contentCompactWidth"
+        :padding-right="contentPaddingRight" :padding-top="contentPaddingTop" :style="contentStyle"
-        :padding="contentPadding"
+        class="transition-[margin-top] duration-200">
-        :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
+      <LayoutFooter v-if="footerEnable" :fixed="footerFixed" :height="footerHeight" :show="!isFullContent"
-        v-if="footerEnable"
+        :width="footerWidth" :z-index="zIndex">
-        :fixed="footerFixed"
-        :height="footerHeight"
-        :show="!isFullContent"
-        :width="footerWidth"
-        :z-index="zIndex"
-      >
         <slot name="footer"></slot>
       </LayoutFooter>
     </div>
     <slot name="extra"></slot>
-    <div
+    <div v-if="maskVisible" :style="maskStyle"
-      v-if="maskVisible"
-      :style="maskStyle"
       class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
-      @click="handleClickMask"
+      @click="handleClickMask"></div>
-    ></div>
   </div>
 </template>

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
+    <a :class="$attrs.class" :href="href"
-      :class="$attrs.class"
+      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500">
-      :href="href"
+      <VbenAvatar v-if="src" :alt="text" :src="src" class="relative w-8 rounded-none bg-transparent" />
-      class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
+      <span v-if="!collapsed" class="text-foreground truncate text-nowrap font-semibold" :class="textClass">
-    >
-      <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"
-      >
         {{ text }}
       </span>
     </a>

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>

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"