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

27
web/src/components/layout/workspace-sidebar-nav.tsx
View File

@@ -1,5 +1,5 @@
import { Popover } from "antd";
import { Bell, ChevronDown, ChevronRight, CircleUserRound, History as HistoryIcon, Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Plus } from "lucide-react";
import { ChevronDown, ChevronRight, CircleUserRound, History as HistoryIcon, Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Plus } from "lucide-react";
import { LayoutGroup, motion, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useRef, useState, type ComponentType, type CSSProperties } from "react";
import { Link, useLocation, useNavigate, useSearchParams } from "react-router";
@@ -8,7 +8,6 @@ import { BrandLogoFrame } from "@/components/brand/brand-logo";
import { Kbd } from "@/components/ui/base/kbd";
import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
import { useWorkspaceLogout } from "@/hooks/use-workspace-logout";
import { SystemAnnouncementCenter } from "@/components/layout/system-announcement-center";
import { aceternityMotion } from "@/lib/aceternity-motion";
import { cn } from "@/lib/utils";
import { preloadWorkspaceRoute } from "@/lib/workspace-route-modules";
@@ -62,7 +61,7 @@ function buildNav(features: FeatureAvailability): { groups: WorkspaceNavGroup[];
return { groups, footer: [] };
}
function WorkspaceSidebarProfile({ collapsed, user }: { collapsed: boolean; user: NonNullable<ReturnType<typeof useUserStore.getState>["user"]> | null }) {
function WorkspaceSidebarProfile({ collapsed, user, onExpand, onCollapse }: { collapsed: boolean; user: NonNullable<ReturnType<typeof useUserStore.getState>["user"]> | null; onExpand: () => void; onCollapse: () => void }) {
const [failed, setFailed] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const avatarUrl = /^https?:\/\//i.test(user?.avatarUrl || "") ? user?.avatarUrl : "";
@@ -88,21 +87,26 @@ function WorkspaceSidebarProfile({ collapsed, user }: { collapsed: boolean; user
{!collapsed ? <span className="app-workspace-sidebar-profile-copy"><strong>{profileName}</strong><span>创作工作台</span></span> : null}
</button>
</Popover>
{!collapsed ? <SystemAnnouncementCenter userId={user.id} className="app-workspace-sidebar-notification" /> : <span className="app-workspace-sidebar-notification-spacer" aria-hidden />}
{!collapsed ? <button type="button" className="app-workspace-sidebar-collapse-toggle" aria-label="收起侧栏" title="收起侧栏" onClick={onCollapse}>
<PanelLeftClose className="size-4" strokeWidth={1.7} />
</button> : null}
</div>
{collapsed ? <button type="button" className="app-workspace-sidebar-collapse-toggle is-collapsed" aria-label="展开侧栏菜单" title="展开侧栏菜单" onClick={onExpand}>
<PanelLeftOpen className="size-4" strokeWidth={1.7} />
</button> : null}
</div>
);
}
function WorkspaceSwitcher({ collapsed, onNavigate, onExpand, onCollapse }: { collapsed: boolean; onNavigate: () => void; onExpand: () => void; onCollapse: () => void }) {
function WorkspaceSwitcher({ collapsed, onNavigate }: { collapsed: boolean; onNavigate: () => void; onExpand: () => void; onCollapse: () => void }) {
const appearance = useAppearanceStore((state) => state.appearance);
if (collapsed) {
return (
<div className="app-workspace-sidebar-rail-header shrink-0">
<button type="button" className="app-workspace-sidebar-rail-button" aria-label="展开侧栏菜单" title="展开侧栏菜单" onClick={onExpand}>
<PanelLeftOpen className="size-4" strokeWidth={1.7} />
</button>
<div className="app-workspace-sidebar-brand-row relative shrink-0 flex items-center justify-center px-3 pt-3">
<Link to="/" onClick={onNavigate} className="app-workspace-sidebar-brand-button group" aria-label={`${appearance.brandName}首页`}>
<BrandLogoFrame className="app-workspace-brand-mark grid size-8 shrink-0 place-items-center rounded-[var(--r-sm)] shadow-sm" logoClassName="size-5 object-contain" alt="" fallback={<InfinityIcon className="size-4" strokeWidth={2.2} />} />
</Link>
</div>
);
}
@@ -118,9 +122,6 @@ function WorkspaceSwitcher({ collapsed, onNavigate, onExpand, onCollapse }: { co
</span>
</span>
</Link>
<button type="button" className="app-workspace-sidebar-collapse-button" aria-label="收起侧栏" title="收起侧栏" onClick={onCollapse}>
<PanelLeftClose className="size-4" strokeWidth={1.7} />
</button>
</div>
);
}
@@ -329,7 +330,7 @@ export function WorkspaceSidebarNav({ collapsed, onNavigate, onOpenSearch, onExp
</LayoutGroup>
<div className="app-workspace-sidebar-footer shrink-0 px-3 py-3">
<WorkspaceSidebarProfile collapsed={collapsed} user={user} />
<WorkspaceSidebarProfile collapsed={collapsed} user={user} onExpand={onExpand} onCollapse={onCollapse} />
{footer.length ? <div className="mt-2 flex flex-col gap-0.5">
{footer.map((item) => (
<NavItem key={item.id} item={item} activeId={activeId} onSelect={onNavigate} onOpenSearch={onOpenSearch} onLogout={() => void handleLogout()} collapsed={collapsed} />

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%;

54
web/src/styles/globals.css
View File

@@ -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;
}

12
web/src/styles/workspace-product.css
View File

@@ -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; }