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 { 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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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)。
|
||||||
|
|||||||
Reference in new issue
Block a user