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 { useNavigate, useLocation } from "react-router-dom";
import { PanelLeftOpen, PanelLeftClose } from "lucide-react";
import { getStoredAuth } from "@/core/auth";
import { isWujieEnv } from "@/core/embed/wujie";
@@ -12,7 +13,13 @@ import {
import { useSidebarMenuItems } from "@/core/page-layout/use-sidebar-menu";
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 visibleMenuItems = useSidebarMenuItems(!!isAdmin);
const inWujieEnv = isWujieEnv();
@@ -189,6 +196,22 @@ export function PageSidebarDark() {
</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 (
<aside className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"}`}>
<div className="sidebar-contents">
@@ -220,6 +243,17 @@ export function PageSidebarDark() {
</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>
</aside>
);
+9 -8
View File
@@ -31,8 +31,6 @@ function PageLayout() {
const location = useLocation();
const { theme } = useTheme();
const isDark = theme === "dark";
// 深色导航侧栏不提供收起入口,始终保持展开,避免切换主题后沿用浅色模式的收起状态。
const sidebarCollapsed = isDark ? false : collapsed;
// 浅色非嵌入:侧边栏为新版「二级导航图标卡片」窄栏(96px);wujie 嵌入仍走旧版手风琴(64/256px)。
const inWujie = useMemo(() => isWujieEnv(), []);
const lightNarrowSidebar = !isDark && !inWujie;
@@ -76,14 +74,17 @@ function PageLayout() {
return (
<RoundtableJobNotifier>
<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">
{pageSidebarAllowed && (
isDark ? (
<PageSidebarDark />
<PageSidebarDark
collapsed={collapsed}
onToggleCollapsed={() => setCollapsed((prev) => !prev)}
/>
) : (
<PageSidebar
collapsed={sidebarCollapsed}
collapsed={collapsed}
onToggleCollapsed={() => setCollapsed((prev) => !prev)}
/>
)
@@ -93,8 +94,8 @@ function PageLayout() {
!pageSidebarAllowed
? ""
: isDark
// 深色 sidebar 固定展开 118px(10 + 98 + 10 gap)。
? "pl-[118px]"
// 深色 sidebar:展开 118px(10 + 98 + 10 gap),收起时主内容不留左内边距。
? (collapsed ? "pl-0" : "pl-[118px]")
: lightNarrowSidebar
// 浅色新版窄栏:展开三级列时 96→236px,主内容左内边距随之过渡
? `transition-[padding] duration-300 ${lightExpanded ? "pl-[236px]" : "pl-[96px]"}`
@@ -108,7 +109,7 @@ function PageLayout() {
path="workspace/*"
element={
<WorkspaceRoutes
pageSidebarCollapsed={sidebarCollapsed}
pageSidebarCollapsed={collapsed}
pageSidebarHidden={!pageSidebarAllowed}
headerHidden={!pageSidebarAllowed}
compactWorkspaceSidebar={pageSidebarAllowed}
@@ -4240,7 +4240,7 @@ function RightSidebar({
{timelineEntries.map((entry) => (
<div
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="grid grid-cols-[68px_minmax(0,1fr)] gap-x-2">
@@ -343,6 +343,17 @@
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 → 主色淡环 ---- */
:is(.dark .roundtable-planning, .roundtable-planning--dark)
:is(
@@ -59,7 +59,8 @@ const Header = ({ collapsed }: HeaderProps) => {
const positionName = myPosition?.name?.trim() || "";
const displayName = liveAccount.displayName;
const showTopNav = isDark && !collapsed && !isWujieEnv();
// 深色侧栏收起只影响左侧导航,不应让顶栏回退到浅色的图标布局。
const showTopNav = isDark && !isWujieEnv();
// 浅色(红/蓝)顶栏:一级导航正常横排进顶栏,不做深色那种围绕基座的特殊处理。
// 与 collapsed 解耦(折叠只影响侧边栏,一级导航始终可见);wujie 嵌入下隐藏,
// 此时一级导航回落到侧边栏(见 page-sidebar.tsx)。