feat(workspace): 侧边栏 - 主页与管理后台侧栏样式统一 (#733)
* fix(admin): 侧栏收起模式 - 修复导航图标未居中 AdminTooltip 在收起模式下用 inline-flex span 包裹 NavLink, 导致 NavLink 无法撑满容器宽度,justify-content: center 不生效。 将 span 强制为 display: block; width: 100% 修复图标居中。 * feat(workspace): 侧边栏 - 主页与管理后台侧栏样式统一 主页侧边栏: - 顶部收起/展开按钮移除,收起时顶部展示平台 logo,logo 与文字内容居中 - 收起/展开按钮移至底部:展开时位于账户信息右侧,收起时位于其下方居中 - 按钮尺寸调整为 40px(展开)/ 48px(收起),与账户、签到按钮协调 - 修复纯图标按钮悬浮时全局规则带来的 accent 光晕,悬浮表现与导航菜单一致 - 个人信息按钮悬浮样式与导航菜单统一(--user-surface-hover,支持暗色主题) 管理后台侧边栏: - 导航链接高度、内边距、圆角、图标尺寸对齐主页侧边栏(44px 高、12px 内边距) - 收起态导航项自适应填满内容区,修复纵向滚动条占位导致的横向滚动 - 收起/展开按钮从侧栏边缘悬浮胶囊改为底部按钮位(与主页一致) - 顶部品牌区改为居中布局,收起时展示 logo * style(admin): 侧栏 - 修复 CI 格式检查 admin-chrome.css 中 cubic-bezier 数值补前导零,通过 Prettier 检查。
This commit is contained in:
@@ -15522,11 +15522,10 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
min-height: 38px;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border-radius: 10px;
|
||||
padding: 0 7px;
|
||||
text-align: left;
|
||||
transition: background-color 160ms cubic-bezier(.16, 1, .3, 1);
|
||||
}
|
||||
|
||||
@@ -16193,12 +16192,13 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
border-radius: 12px;
|
||||
color: #222;
|
||||
text-align: left;
|
||||
transition: background-color .18s ease, transform .18s ease;
|
||||
transition: transform .18s ease;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-profile:hover,
|
||||
.app-user-workspace .app-workspace-sidebar-profile:focus-visible {
|
||||
background: rgba(72, 72, 73, .055);
|
||||
background: var(--user-surface-hover);
|
||||
color: var(--user-ink);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-profile.is-collapsed {
|
||||
@@ -16301,6 +16301,52 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-collapse-toggle {
|
||||
display: grid;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex: 0 0 40px;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
color: var(--user-ink-muted);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-collapse-toggle:hover,
|
||||
.app-user-workspace .app-workspace-sidebar-collapse-toggle:focus-visible {
|
||||
background: var(--user-surface-hover);
|
||||
color: var(--user-ink);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-collapse-toggle svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transition: transform var(--user-motion, .18s) ease;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-collapse-toggle:hover svg {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-collapse-toggle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: 0 0 48px;
|
||||
}
|
||||
|
||||
.dark .app-user-workspace .app-workspace-sidebar-collapse-toggle {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
|
||||
.dark .app-user-workspace .app-workspace-sidebar-collapse-toggle:hover,
|
||||
.dark .app-user-workspace .app-workspace-sidebar-collapse-toggle:focus-visible {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.dark .app-user-workspace .app-workspace-sidebar-collapse-toggle svg {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.app-user-workspace .app-workspace-sidebar-profile-popover {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
@@ -551,9 +551,10 @@
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-account { width: 100%; align-items: center; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-checkin { width: 48px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-storage { width: 40px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile-row { width: 100%; justify-content: center; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile { width: 48px; min-width: 48px; flex: 0 0 48px; margin-inline: auto; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile-row { width: 100%; justify-content: center; gap: 4px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile { width: 48px; min-width: 48px; flex: 0 0 48px; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-notification-spacer { display: none; }
|
||||
.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-collapse-toggle.is-collapsed { margin-top: 4px; }
|
||||
|
||||
.app-user-workspace .app-workspace-nav-link {
|
||||
position: relative;
|
||||
@@ -713,6 +714,13 @@
|
||||
.app-product-workspace button:has(> svg):not(:has(> span)):focus-visible,
|
||||
.app-product-overlays button:has(> svg):not(:has(> span)):focus-visible { outline: 2px solid var(--product-focus-ring); outline-offset: 2px; }
|
||||
|
||||
/* 侧栏自绘图标按钮(收起/展开切换等)不套用浮层 accent 光晕,悬浮表现与导航菜单保持一致。 */
|
||||
.app-user-workspace .app-workspace-sidebar button:has(> svg):not(:has(> span)):not(:disabled):hover {
|
||||
color: var(--user-ink) !important;
|
||||
background: var(--user-surface-hover) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 列表进入节奏:卡片和图片错开出现,慢网络时仍有内容层次。 */
|
||||
.app-product-workspace :is(.product-collection-card, .library-card, .task-grid-card, .task-record-row, .skill-library-card, .plugin-card) { animation: product-card-enter var(--product-enter) var(--product-ease) both; }
|
||||
.app-product-workspace :is(.product-collection-card, .library-card, .task-grid-card, .task-record-row, .skill-library-card, .plugin-card):nth-child(2) { animation-delay: 45ms; }
|
||||
|
||||
Reference in New Issue
Block a user