feat: 统一侧栏折叠动画并收口拆解页
This commit is contained in:
GJ
+37
-29
@@ -51,8 +51,8 @@ const narrowMedia = window.matchMedia(NARROW_NAV)
|
||||
const narrow = ref(narrowMedia.matches)
|
||||
const collapsed = ref(narrow.value)
|
||||
const settingsOpen = ref(false)
|
||||
/** 窄屏折叠只裁切文字，不把菜单收成图标，避免推挤动画时错位。 */
|
||||
const menuCollapsed = computed(() => !narrow.value && collapsed.value)
|
||||
/** 折叠只裁切文字，不把菜单收成图标，宽屏与窄屏共用同一套宽度动画。 */
|
||||
const menuCollapsed = false
|
||||
/** 当前视口下的折叠侧栏宽度。 */
|
||||
const siderCollapsedWidth = computed(() => (narrow.value ? SIDER_COLLAPSED_WIDTH_NARROW : SIDER_COLLAPSED_WIDTH))
|
||||
/** 当前视口下的展开侧栏宽度。 */
|
||||
@@ -163,14 +163,14 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
:style="{ width: (collapsed ? siderCollapsedWidth : siderExpandedWidth) + 'px' }"
|
||||
aria-label="主导航"
|
||||
>
|
||||
<!-- 以下是侧栏品牌：折叠仅图标，展开图标加文字 -->
|
||||
<!-- 以下是侧栏品牌：折叠裁切文字，图标位置保持不变 -->
|
||||
<RouterLink
|
||||
to="/projects"
|
||||
class="admin-brand"
|
||||
:class="{ 'is-collapsed': collapsed }"
|
||||
aria-label="短剧工作台首页"
|
||||
>
|
||||
<Clapperboard :size="narrow ? NAV_ICON_SIZE : 24" /><span v-if="!collapsed"
|
||||
<Clapperboard :size="narrow ? NAV_ICON_SIZE : 24" /><span
|
||||
>短剧工作台<small>SHORT DRAMA STUDIO</small></span
|
||||
>
|
||||
</RouterLink>
|
||||
@@ -186,7 +186,7 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
:root-indent="navIconIndent"
|
||||
/>
|
||||
</NScrollbar>
|
||||
<!-- 以下是侧栏底部后端连接：折叠仅图标，展开图标加文字 -->
|
||||
<!-- 以下是侧栏底部后端连接：折叠裁切文字，图标位置保持不变 -->
|
||||
<footer class="admin-sider-footer">
|
||||
<NTooltip placement="right" :disabled="!collapsed">
|
||||
<template #trigger>
|
||||
@@ -199,7 +199,7 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
@click="openSettings"
|
||||
>
|
||||
<template #icon><Settings2 :size="18" /></template>
|
||||
<span v-if="!collapsed">后端连接</span>
|
||||
<span class="admin-settings-label">后端连接</span>
|
||||
</NButton>
|
||||
</template>
|
||||
后端连接
|
||||
@@ -272,37 +272,57 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
}
|
||||
.admin-sider {
|
||||
@apply flex flex-col h-full w-[208px] shrink-0 overflow-hidden bg-(--app-subtle);
|
||||
transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.admin-sider.is-collapsed {
|
||||
@apply w-16;
|
||||
}
|
||||
.admin-nav-scroll.n-scrollbar {
|
||||
@apply flex-1 min-h-0;
|
||||
min-width: var(--admin-sider-expanded);
|
||||
}
|
||||
.admin-sider .n-menu-item-content-header {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.admin-sider.is-collapsed .n-menu-item-content-header {
|
||||
opacity: 0;
|
||||
}
|
||||
.admin-sider-footer {
|
||||
@apply w-full shrink-0 overflow-hidden;
|
||||
padding-block: 8px max(8px, env(safe-area-inset-bottom));
|
||||
}
|
||||
.n-button.admin-settings-button {
|
||||
@apply justify-start h-11 w-full px-5;
|
||||
@apply justify-start h-11 w-full overflow-hidden px-5;
|
||||
}
|
||||
.n-button.admin-settings-button.is-collapsed {
|
||||
@apply justify-center px-0;
|
||||
.n-button.admin-settings-button .n-button__icon {
|
||||
@apply shrink-0;
|
||||
}
|
||||
.admin-settings-label {
|
||||
@apply whitespace-nowrap;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.admin-sider.is-collapsed .admin-settings-label {
|
||||
opacity: 0;
|
||||
}
|
||||
.admin-sider .n-menu .n-menu-item-content::before {
|
||||
@apply left-0 right-0 rounded-none;
|
||||
}
|
||||
.admin-brand {
|
||||
@apply flex shrink-0 items-center gap-3 h-[74px] py-0 px-5 text-ink whitespace-nowrap;
|
||||
}
|
||||
.admin-brand.is-collapsed {
|
||||
@apply justify-center px-0;
|
||||
@apply flex shrink-0 items-center gap-3 h-[74px] overflow-hidden py-0 px-5 text-ink whitespace-nowrap;
|
||||
min-width: var(--admin-sider-expanded);
|
||||
}
|
||||
.admin-brand > svg {
|
||||
@apply shrink-0;
|
||||
}
|
||||
.admin-brand span {
|
||||
@apply text-[15px] font-semibold;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.admin-sider.is-collapsed .admin-brand span {
|
||||
opacity: 0;
|
||||
}
|
||||
.admin-brand small {
|
||||
@apply block text-[8px] tracking-[1px] font-normal text-muted mt-[3px];
|
||||
@@ -319,7 +339,6 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
@media (max-width: 800px) {
|
||||
.admin-sider {
|
||||
overflow: hidden;
|
||||
transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
/* 主栏宽度锁在折叠态剩余空间，侧栏变宽时把主栏推到右侧而不是压窄。 */
|
||||
.admin-layout > .admin-main {
|
||||
@@ -328,21 +347,8 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
min-width: calc(100% - var(--admin-sider-collapsed));
|
||||
max-width: calc(100% - var(--admin-sider-collapsed));
|
||||
}
|
||||
.admin-nav-scroll.n-scrollbar {
|
||||
min-width: var(--admin-sider-expanded);
|
||||
}
|
||||
.admin-brand {
|
||||
@apply h-12 w-full overflow-hidden;
|
||||
}
|
||||
.admin-sider:not(.is-collapsed) .admin-brand {
|
||||
@apply justify-start px-3.5;
|
||||
}
|
||||
.admin-sider .n-menu-item-content-header {
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.admin-sider.is-collapsed .n-menu-item-content-header {
|
||||
opacity: 0;
|
||||
@apply h-12 justify-start px-3.5;
|
||||
}
|
||||
.admin-topbar {
|
||||
@apply py-0 px-2.5;
|
||||
@@ -350,7 +356,9 @@ const menuOptions = computed<MenuOption[]>(() => [
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.admin-sider,
|
||||
.admin-sider .n-menu-item-content-header {
|
||||
.admin-sider .n-menu-item-content-header,
|
||||
.admin-brand span,
|
||||
.admin-settings-label {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user