fix: 修复深色导航与会商悬浮样式

This commit is contained in:
fengxiangdebaozi committed 2026-07-16 11:21:52 +08:00
1 parent 3cd093a8a2
commit d7d101814f
5 files changed
+58 -11

No files matched your search

@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import { PanelLeftOpen, PanelLeftClose } from "lucide-react";
import { getStoredAuth } from "@/core/auth"; import { getStoredAuth } from "@/core/auth";
import { isWujieEnv } from "@/core/embed/wujie"; import { isWujieEnv } from "@/core/embed/wujie";
@@ -12,7 +13,13 @@ import {
import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu"; import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";
import './page-sdebar.css' import './page-sdebar.css'
export function PageSidebarDark() { type PageSidebarDarkProps = {
/** 是否收起(true 时只渲染左下角浮动入口,sidebar 主体隐藏) */
collapsed: boolean;
onToggleCollapsed: () => void;
};
export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDarkProps) {
const isAdmin = getStoredAuth()?.system_role === "admin"; const isAdmin = getStoredAuth()?.system_role === "admin";
const visibleMenuItems = useSidebarMenuItems(!!isAdmin); const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
const inWujieEnv = isWujieEnv(); const inWujieEnv = isWujieEnv();
@@ -189,6 +196,22 @@ export function PageSidebarDark() {
</div> </div>
); );
// 收起时主侧栏不占宽度,保留左下角入口以便随时恢复。
if (collapsed) {
return (
<button
type="button"
title="展开侧边栏"
aria-label="展开侧边栏"
className="sidebar-collapse-btn sidebar-collapse-btn--floating"
onClick={onToggleCollapsed}
>
<PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
<span className="sidebar-collapse-btn__label">展开面板</span>
</button>
);
}
return ( return (
<aside className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"}`}> <aside className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"}`}>
<div className="sidebar-contents"> <div className="sidebar-contents">
@@ -220,6 +243,17 @@ export function PageSidebarDark() {
</div> </div>
</div> </div>
))} ))}
<button
type="button"
title="收起侧边栏"
aria-label="收起侧边栏"
className="sidebar-collapse-btn sidebar-collapse-btn--inline"
onClick={onToggleCollapsed}
>
<PanelLeftClose className="sidebar-collapse-btn__icon" aria-hidden="true" />
<span className="sidebar-collapse-btn__label">收起面板</span>
</button>
</div> </div>
</aside> </aside>
); );
+9 -8
View File
@@ -31,8 +31,6 @@ function PageLayout() {
const location = useLocation(); const location = useLocation();
const { theme } = useTheme(); const { theme } = useTheme();
const isDark = theme === "dark"; const isDark = theme === "dark";
// 深色导航侧栏不提供收起入口,始终保持展开,避免切换主题后沿用浅色模式的收起状态。
const sidebarCollapsed = isDark ? false : collapsed;
// 浅色非嵌入:侧边栏为新版「二级导航图标卡片」窄栏(96px);wujie 嵌入仍走旧版手风琴(64/256px)。 // 浅色非嵌入:侧边栏为新版「二级导航图标卡片」窄栏(96px);wujie 嵌入仍走旧版手风琴(64/256px)。
const inWujie = useMemo(() => isWujieEnv(), []); const inWujie = useMemo(() => isWujieEnv(), []);
const lightNarrowSidebar = !isDark && !inWujie; const lightNarrowSidebar = !isDark && !inWujie;
@@ -76,14 +74,17 @@ function PageLayout() {
return ( return (
<RoundtableJobNotifier> <RoundtableJobNotifier>
<div className="h-full flex flex-col bg-muted/20"> <div className="h-full flex flex-col bg-muted/20">
{pageSidebarAllowed && <Header collapsed={sidebarCollapsed} />} {pageSidebarAllowed && <Header collapsed={collapsed} />}
<div className="flex flex-1 overflow-hidden"> <div className="flex flex-1 overflow-hidden">
{pageSidebarAllowed && ( {pageSidebarAllowed && (
isDark ? ( isDark ? (
<PageSidebarDark /> <PageSidebarDark
collapsed={collapsed}
onToggleCollapsed={() => setCollapsed((prev) => !prev)}
/>
) : ( ) : (
<PageSidebar <PageSidebar
collapsed={sidebarCollapsed} collapsed={collapsed}
onToggleCollapsed={() => setCollapsed((prev) => !prev)} onToggleCollapsed={() => setCollapsed((prev) => !prev)}
/> />
) )
@@ -93,8 +94,8 @@ function PageLayout() {
!pageSidebarAllowed !pageSidebarAllowed
? "" ? ""
: isDark : isDark
// 深色 sidebar 固定展开 118px(10 + 98 + 10 gap)。 // 深色 sidebar:展开 118px(10 + 98 + 10 gap),收起时主内容不留左内边距。
? "pl-[118px]" ? (collapsed ? "pl-0" : "pl-[118px]")
: lightNarrowSidebar : lightNarrowSidebar
// 浅色新版窄栏:展开三级列时 96→236px,主内容左内边距随之过渡 // 浅色新版窄栏:展开三级列时 96→236px,主内容左内边距随之过渡
? `transition-[padding] duration-300 ${lightExpanded ? "pl-[236px]" : "pl-[96px]"}` ? `transition-[padding] duration-300 ${lightExpanded ? "pl-[236px]" : "pl-[96px]"}`
@@ -108,7 +109,7 @@ function PageLayout() {
path="workspace/*" path="workspace/*"
element={ element={
<WorkspaceRoutes <WorkspaceRoutes
pageSidebarCollapsed={sidebarCollapsed} pageSidebarCollapsed={collapsed}
pageSidebarHidden={!pageSidebarAllowed} pageSidebarHidden={!pageSidebarAllowed}
headerHidden={!pageSidebarAllowed} headerHidden={!pageSidebarAllowed}
compactWorkspaceSidebar={pageSidebarAllowed} compactWorkspaceSidebar={pageSidebarAllowed}
@@ -4240,7 +4240,7 @@ function RightSidebar({
{timelineEntries.map((entry) => ( {timelineEntries.map((entry) => (
<div <div
key={entry.id} key={entry.id}
className="relative rounded-lg px-1.5 py-1 transition-colors hover:bg-slate-50/80" className="roundtable-clarification-entry relative rounded-lg px-1.5 py-1 transition-colors hover:bg-slate-50/80"
> >
<div className="absolute -left-[20.5px] top-2 h-3 w-3 rounded-full bg-primary border-2 border-white ring-2 ring-[var(--brand-200)]" /> <div className="absolute -left-[20.5px] top-2 h-3 w-3 rounded-full bg-primary border-2 border-white ring-2 ring-[var(--brand-200)]" />
<div className="grid grid-cols-[68px_minmax(0,1fr)] gap-x-2"> <div className="grid grid-cols-[68px_minmax(0,1fr)] gap-x-2">
@@ -343,6 +343,17 @@
color: var(--muted-foreground) !important; color: var(--muted-foreground) !important;
} }
/* ---- Step1 右侧「澄清记录」:覆盖 hover:bg-slate-50/80,避免深色下泛灰白 ---- */
:is(.dark .roundtable-planning, .roundtable-planning--dark)
.roundtable-clarification-entry:hover {
background-color: rgb(22 119 255 / 18%) !important;
}
:is(.dark .roundtable-planning, .roundtable-planning--dark)
.roundtable-clarification-entry:hover h4 {
color: #e8edf5 !important;
}
/* ---- focus ring:brand-200 → 主色淡环 ---- */ /* ---- focus ring:brand-200 → 主色淡环 ---- */
:is(.dark .roundtable-planning, .roundtable-planning--dark) :is(.dark .roundtable-planning, .roundtable-planning--dark)
:is( :is(
@@ -59,7 +59,8 @@ const Header = ({ collapsed }: HeaderProps) => {
const positionName = myPosition?.name?.trim() || ""; const positionName = myPosition?.name?.trim() || "";
const displayName = liveAccount.displayName; const displayName = liveAccount.displayName;
const showTopNav = isDark && !collapsed && !isWujieEnv(); // 深色侧栏收起只影响左侧导航,不应让顶栏回退到浅色的图标布局。
const showTopNav = isDark && !isWujieEnv();
// 浅色(红/蓝)顶栏:一级导航正常横排进顶栏,不做深色那种围绕基座的特殊处理。 // 浅色(红/蓝)顶栏:一级导航正常横排进顶栏,不做深色那种围绕基座的特殊处理。
// 与 collapsed 解耦(折叠只影响侧边栏,一级导航始终可见);wujie 嵌入下隐藏, // 与 collapsed 解耦(折叠只影响侧边栏,一级导航始终可见);wujie 嵌入下隐藏,
// 此时一级导航回落到侧边栏(见 page-sidebar.tsx)。 // 此时一级导航回落到侧边栏(见 page-sidebar.tsx)。