diff --git a/web/src/components/layout/workspace-sidebar-nav.tsx b/web/src/components/layout/workspace-sidebar-nav.tsx index ea7b87562..52bc49b73 100644 --- a/web/src/components/layout/workspace-sidebar-nav.tsx +++ b/web/src/components/layout/workspace-sidebar-nav.tsx @@ -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["user"]> | null }) { +function WorkspaceSidebarProfile({ collapsed, user, onExpand, onCollapse }: { collapsed: boolean; user: NonNullable["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 ? {profileName}创作工作台 : null} - {!collapsed ? : } + {!collapsed ? : null} + {collapsed ? : null} ); } -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 ( -
- +
+ + } /> +
); } @@ -118,9 +122,6 @@ function WorkspaceSwitcher({ collapsed, onNavigate, onExpand, onCollapse }: { co -
); } @@ -329,7 +330,7 @@ export function WorkspaceSidebarNav({ collapsed, onNavigate, onOpenSearch, onExp
- + {footer.length ?
{footer.map((item) => ( void handleLogout()} collapsed={collapsed} /> diff --git a/web/src/pages/admin/components/admin-shell.tsx b/web/src/pages/admin/components/admin-shell.tsx index d0d6c9860..997fba222 100644 --- a/web/src/pages/admin/components/admin-shell.tsx +++ b/web/src/pages/admin/components/admin-shell.tsx @@ -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() {
-
- - - - {!collapsed ? 返回创作台 : null} - - +
+
+ + + + {!collapsed ? 返回创作台 : null} + + + {!collapsed ? ( + + ) : null} +
+ {collapsed ? ( + + ) : null}
- - -
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%; diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css index b5a783a22..289debede 100644 --- a/web/src/styles/globals.css +++ b/web/src/styles/globals.css @@ -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; } diff --git a/web/src/styles/workspace-product.css b/web/src/styles/workspace-product.css index 483e13a72..8ae7ae652 100644 --- a/web/src/styles/workspace-product.css +++ b/web/src/styles/workspace-product.css @@ -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; }