框架
Frontend CI/CD / build (web-office) (push) Failing after 7s
Details
Frontend CI/CD / build (web-office) (push) Failing after 7s
Details
This commit is contained in:
parent
201ec0e895
commit
fe47552c5a
|
@ -18,7 +18,7 @@ import {
|
||||||
} from './components';
|
} from './components';
|
||||||
import { useLayout } from './hooks/use-layout';
|
import { useLayout } from './hooks/use-layout';
|
||||||
|
|
||||||
interface Props extends VbenLayoutProps {}
|
interface Props extends VbenLayoutProps { }
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'VbenLayout',
|
name: 'VbenLayout',
|
||||||
|
@ -120,7 +120,6 @@ const sidebarEnableState = computed(() => {
|
||||||
*/
|
*/
|
||||||
const sidebarMarginTop = computed(() => {
|
const sidebarMarginTop = computed(() => {
|
||||||
const { headerHeight, isMobile } = props;
|
const { headerHeight, isMobile } = props;
|
||||||
console.log(props);
|
|
||||||
return (isMixedNav.value && !isMobile) ||
|
return (isMixedNav.value && !isMobile) ||
|
||||||
currentLayout.value === 'sidebar-topbar'
|
currentLayout.value === 'sidebar-topbar'
|
||||||
? headerHeight
|
? headerHeight
|
||||||
|
@ -245,9 +244,9 @@ const tabbarStyle = computed((): CSSProperties => {
|
||||||
let marginLeft = 0;
|
let marginLeft = 0;
|
||||||
|
|
||||||
// 如果不是混合导航,tabbar 的宽度为 100%
|
// 如果不是混合导航,tabbar 的宽度为 100%
|
||||||
if (!isMixedNav.value || props.sidebarHidden) {
|
if ((!isMixedNav.value || props.sidebarHidden) && currentLayout.value !== 'sidebar-topbar') {
|
||||||
width = '100%';
|
width = '100%';
|
||||||
} else if (sidebarEnable.value) {
|
} else if (sidebarEnable.value ) {
|
||||||
// 鼠标在侧边栏上时,且侧边栏展开时的宽度
|
// 鼠标在侧边栏上时,且侧边栏展开时的宽度
|
||||||
const onHoveringWidth = sidebarExpandOnHover.value
|
const onHoveringWidth = sidebarExpandOnHover.value
|
||||||
? props.sidebarWidth
|
? props.sidebarWidth
|
||||||
|
@ -278,9 +277,9 @@ const contentStyle = computed((): CSSProperties => {
|
||||||
return {
|
return {
|
||||||
marginTop:
|
marginTop:
|
||||||
fixed &&
|
fixed &&
|
||||||
!isFullContent.value &&
|
!isFullContent.value &&
|
||||||
!headerIsHidden.value &&
|
!headerIsHidden.value &&
|
||||||
(!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
|
(!isHeaderAutoMode.value || scrollY.value < headerWrapperHeight.value)
|
||||||
? `${headerWrapperHeight.value}px`
|
? `${headerWrapperHeight.value}px`
|
||||||
: 0,
|
: 0,
|
||||||
paddingBottom: `${footerEnable && footerFixed ? footerHeight : 0}px`,
|
paddingBottom: `${footerEnable && footerFixed ? footerHeight : 0}px`,
|
||||||
|
@ -448,31 +447,15 @@ function handleHeaderToggle() {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="relative flex min-h-full w-full">
|
<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>
|
<slot name="logo"></slot>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -491,65 +474,35 @@ function handleHeaderToggle() {
|
||||||
</template>
|
</template>
|
||||||
</LayoutSidebar>
|
</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>
|
<template v-if="showHeaderLogo" #logo>
|
||||||
<slot name="logo"></slot>
|
<slot name="logo"></slot>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #toggle-button>
|
<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" />
|
<Menu class="size-4" />
|
||||||
</VbenIconButton>
|
</VbenIconButton>
|
||||||
</template>
|
</template>
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
</LayoutHeader>
|
</LayoutHeader>
|
||||||
|
|
||||||
<LayoutTabbar
|
<LayoutTabbar v-if="tabbarEnable" :height="tabbarHeight" :style="tabbarStyle">
|
||||||
v-if="tabbarEnable"
|
|
||||||
:height="tabbarHeight"
|
|
||||||
:style="tabbarStyle"
|
|
||||||
>
|
|
||||||
<slot name="tabbar"></slot>
|
<slot name="tabbar"></slot>
|
||||||
</LayoutTabbar>
|
</LayoutTabbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- </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>
|
<slot name="content"></slot>
|
||||||
|
|
||||||
<template #overlay>
|
<template #overlay>
|
||||||
|
@ -557,23 +510,14 @@ function handleHeaderToggle() {
|
||||||
</template>
|
</template>
|
||||||
</LayoutContent>
|
</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>
|
<slot name="footer"></slot>
|
||||||
</LayoutFooter>
|
</LayoutFooter>
|
||||||
</div>
|
</div>
|
||||||
<slot name="extra"></slot>
|
<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"
|
class="bg-overlay fixed left-0 top-0 h-full w-full transition-[background-color] duration-200"
|
||||||
@click="handleClickMask"
|
@click="handleClickMask"></div>
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -26,6 +26,10 @@ interface Props {
|
||||||
* @zh_CN Logo 主题
|
* @zh_CN Logo 主题
|
||||||
*/
|
*/
|
||||||
theme?: string;
|
theme?: string;
|
||||||
|
/**
|
||||||
|
* logo字体颜色
|
||||||
|
*/
|
||||||
|
textClass?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
|
@ -43,21 +47,10 @@ withDefaults(defineProps<Props>(), {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="theme" class="flex h-full items-center text-lg">
|
<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 }}
|
{{ text }}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -21,6 +21,10 @@ interface Props {
|
||||||
* 消息列表
|
* 消息列表
|
||||||
*/
|
*/
|
||||||
notifications?: NotificationItem[];
|
notifications?: NotificationItem[];
|
||||||
|
/**
|
||||||
|
* 图标颜色
|
||||||
|
*/
|
||||||
|
icColor?:string;
|
||||||
}
|
}
|
||||||
|
|
||||||
defineOptions({ name: 'NotificationPopup' });
|
defineOptions({ name: 'NotificationPopup' });
|
||||||
|
@ -70,9 +74,9 @@ function handleClick(item: NotificationItem) {
|
||||||
<VbenIconButton class="bell-button text-foreground relative">
|
<VbenIconButton class="bell-button text-foreground relative">
|
||||||
<span
|
<span
|
||||||
v-if="dot"
|
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>
|
></span>
|
||||||
<Bell class="size-4" />
|
<Bell class="size-4" :style="{ color: icColor}" />
|
||||||
</VbenIconButton>
|
</VbenIconButton>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -53,6 +53,10 @@ interface Props {
|
||||||
* 文本
|
* 文本
|
||||||
*/
|
*/
|
||||||
text?: string;
|
text?: string;
|
||||||
|
/**
|
||||||
|
* 是否隐藏锁定屏幕
|
||||||
|
*/
|
||||||
|
hideLockLcreen?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
|
@ -196,7 +200,8 @@ if (enableShortcutKey.value) {
|
||||||
<VbenIcon :icon="menu.icon" class="mr-2 size-4" />
|
<VbenIcon :icon="menu.icon" class="mr-2 size-4" />
|
||||||
{{ menu.text }}
|
{{ menu.text }}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuSeparator />
|
<template v-if="!hideLockLcreen">
|
||||||
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
v-if="preferences.widget.lockScreen"
|
v-if="preferences.widget.lockScreen"
|
||||||
class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
|
class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
|
||||||
|
@ -208,6 +213,7 @@ if (enableShortcutKey.value) {
|
||||||
{{ altView }} L
|
{{ altView }} L
|
||||||
</DropdownMenuShortcut>
|
</DropdownMenuShortcut>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
</template>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
|
class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
|
||||||
|
|
Loading…
Reference in New Issue