tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspace): 侧边栏 - 主页与管理后台侧栏样式统一 (#733)

Browse Source 
* 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:
俗人
2026-10-11 22:02:54 +08:00
committed by GitHub
parent 74eb83e92a
commit 7f50b4507a
5 changed files with 174 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/pages/admin/components/admin-shell.tsx
View File

@@ -5,8 +5,6 @@ import {
ArrowLeft,
BarChart3,
BellRing,
ChevronLeft,
ChevronRight,
ChevronDown,
CloudUpload,
Coins,
@@ -24,6 +22,8 @@ import {
Moon,
Palette,
Paintbrush,
PanelLeftClose,
PanelLeftOpen,
PlugZap,
RadioTower,
RefreshCw,
@@ -172,20 +172,27 @@ function AdminShellLayout() {
</AdminTooltip>
</div>
<AdminNavigation collapsed={collapsed} />
<div className="admin-sidebar-footer shrink-0">
<AdminTooltip title={collapsed ? "返回创作台" : undefined} placement="right">
<NavLink to="/" aria-label={collapsed ? "返回创作台" : undefined} className={cn("admin-nav-link", collapsed && "is-collapsed")}>
<Home className="size-4" strokeWidth={1.6} />
{!collapsed ? <span>返回创作台</span> : null}
</NavLink>
</AdminTooltip>
<div className={cn("admin-sidebar-footer shrink-0", collapsed && "is-collapsed")}>
<div className="admin-sidebar-footer-row">
<AdminTooltip title={collapsed ? "返回创作台" : undefined} placement="right">
<NavLink to="/" aria-label={collapsed ? "返回创作台" : undefined} className={cn("admin-nav-link", collapsed && "is-collapsed")}>
<Home className="size-4" strokeWidth={1.6} />
{!collapsed ? <span>返回创作台</span> : null}
</NavLink>
</AdminTooltip>
{!collapsed ? (
<button type="button" className="admin-sidebar-collapse-toggle" onClick={toggleCollapsed} aria-label="收起侧栏" title="收起侧栏" aria-expanded={!collapsed}>
<PanelLeftClose className="size-4" strokeWidth={1.7} />
</button>
) : null}
</div>
{collapsed ? (
<button type="button" className="admin-sidebar-collapse-toggle is-collapsed" onClick={toggleCollapsed} aria-label="展开侧栏" title="展开侧栏">
<PanelLeftOpen className="size-4" strokeWidth={1.7} />
</button>
) : null}
</div>
</aside>
<AdminTooltip title={collapsed ? "展开侧栏" : "收起侧栏"} placement="right">
<button type="button" className={cn("admin-sidebar-edge-toggle hidden lg:grid", collapsed && "is-collapsed")} onClick={toggleCollapsed} aria-label={collapsed ? "展开侧栏" : "收起侧栏"} aria-expanded={!collapsed}>
{collapsed ? <ChevronRight className="size-3.5" aria-hidden="true" /> : <ChevronLeft className="size-3.5" aria-hidden="true" />}
</button>
</AdminTooltip>
<section className="flex min-w-0 flex-1 flex-col overflow-hidden">
<MobileAdminNavigation />
<Suspense

114
web/src/pages/admin/theme/admin-chrome.css
View File

@@ -33,27 +33,35 @@
[data-admin-root] .admin-sidebar-identity {
display: flex;
height: 56px;
min-height: 54px;
align-items: center;
padding: 0 12px;
border-bottom: 0;
padding: 10px 8px 0;
}
[data-admin-root] .admin-sidebar-identity > span {
display: block;
width: 100%;
}
[data-admin-root] .admin-sidebar-brand-button {
display: flex;
min-width: 0;
min-height: 38px;
width: 100%;
align-items: center;
justify-content: center;
gap: 10px;
padding: 4px;
padding: 0 7px;
border: 0;
border-radius: 10px;
background: transparent;
color: inherit;
text-align: left;
transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-admin-root] .admin-sidebar-brand-button.is-collapsed {
justify-content: center;
[data-admin-root] .admin-sidebar-brand-button:hover,
[data-admin-root] .admin-sidebar-brand-button:focus-visible {
background: var(--admin-nav-hover);
}
[data-admin-root] .admin-sidebar-brand-mark {
@@ -123,20 +131,18 @@
}
[data-admin-root] .admin-nav-collapsed-separator {
height: 1px;
margin: 8px 10px;
background: var(--admin-divider);
display: none;
}
[data-admin-root] .admin-nav-link {
position: relative;
display: flex;
height: 32px;
min-height: 44px;
align-items: center;
gap: 10px;
padding: 0 8px;
padding: 0 12px;
border: 0;
border-radius: var(--admin-radius);
border-radius: 8px;
color: var(--admin-text-secondary);
font-size: 13px;
font-weight: 500;
@@ -149,9 +155,18 @@
[data-admin-root] .admin-nav-link.is-collapsed {
justify-content: center;
width: 100%;
min-width: 0;
margin-inline: 0;
padding: 0;
}
[data-admin-root] .admin-nav-group-items > span,
[data-admin-root] .admin-sidebar-footer-row > span {
display: block;
width: 100%;
}
[data-admin-root] .admin-nav-link:hover {
background: var(--admin-nav-hover);
color: var(--admin-text);
@@ -172,49 +187,78 @@
}
[data-admin-root] .admin-nav-link svg {
width: 15px;
height: 15px;
width: 16px;
height: 16px;
flex: 0 0 auto;
color: currentColor;
stroke-width: 1.75;
}
[data-admin-root] .admin-sidebar.is-collapsed .admin-nav-link svg {
width: 18px;
height: 18px;
}
[data-admin-root] .admin-nav-link:focus-visible,
[data-admin-root] .admin-icon-button:focus-visible,
[data-admin-root] .admin-sidebar-edge-toggle:focus-visible {
[data-admin-root] .admin-sidebar-collapse-toggle:focus-visible {
outline: 2px solid var(--admin-focus);
outline-offset: 1px;
}
[data-admin-root] .admin-sidebar-footer {
padding: 8px;
border-top: 1px solid var(--admin-border);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 12px 12px;
border-top: 0;
background: var(--admin-sidebar);
}
[data-admin-root] .admin-sidebar-edge-toggle {
position: absolute;
top: 50%;
left: calc(var(--admin-sidebar-width) - 11px);
z-index: 4;
width: 22px;
height: 36px;
[data-admin-root] .admin-sidebar-footer.is-collapsed {
padding-inline: 8px;
}
[data-admin-root] .admin-sidebar-footer-row {
display: flex;
width: 100%;
align-items: center;
gap: 4px;
}
[data-admin-root] .admin-sidebar-footer .admin-nav-link {
flex: 1 1 auto;
}
[data-admin-root] .admin-sidebar-collapse-toggle {
display: grid;
width: 40px;
height: 40px;
flex: 0 0 40px;
place-items: center;
border: 1px solid var(--admin-border);
border-radius: 999px;
background: var(--admin-surface);
color: var(--admin-text-muted);
transform: translateY(-50%);
border: 0;
border-radius: 10px;
background: transparent;
color: var(--admin-text-secondary);
}
[data-admin-root] .admin-sidebar-edge-toggle.is-collapsed {
left: calc(var(--admin-sidebar-collapsed) - 11px);
}
[data-admin-root] .admin-sidebar-edge-toggle:hover {
[data-admin-root] .admin-sidebar-collapse-toggle:hover {
background: var(--admin-nav-hover);
color: var(--admin-text);
}
[data-admin-root] .admin-sidebar-collapse-toggle svg {
width: 18px;
height: 18px;
}
[data-admin-root] .admin-sidebar-collapse-toggle.is-collapsed {
width: 48px;
height: 48px;
flex: 0 0 48px;
}
[data-admin-root] .admin-page-root,
[data-admin-root] .admin-page-root > div {
height: 100%;