fix: 修复深色导航与会商悬浮样式
This commit is contained in:
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>
|
||||
);
|
||||
|
||||
@@ -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)。
|
||||
|
||||
Reference in new issue
Block a user