wsk/deerflow-code
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码修改

Browse Source
This commit is contained in:
fengxiangdebaozi committed 2026-05-29 18:07:45 +08:00
1 parent 8ed3b0eb91
commit 786ddaa38f
9 files changed
+293 -173
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend-web/src/components/page-sdebar.css
+95 -40
View File
@@ -1,6 +1,16 @@
.sidebar-contnet {
position: fixed;
left: 0;
top: 4rem;
z-index: 40;
width: 98px;
height: calc(100vh - 4rem);
flex-shrink: 0;
}
.sidebar-contents {
width: 98px;
min-height: 986px;
min-height: calc(100% - 20px);
background: rgba(3, 38, 80, 0.8);
border: 1px solid;
border-color: rgba(43, 143, 254, 0.6);
@@ -11,16 +21,30 @@
align-items: center;
padding: 12px 10px;
position: relative;
height: calc(100% - 20px);
box-sizing: border-box;
transform: translate(10px, 10px);
}
.item-nav-group {
width: 100%;
}
.item-nav-wrap {
position: relative;
width: 100%;
}
.item-nav-group:first-child .item-nav {
margin-top: 0;
}
.item-nav {
width: 100%;
height: 70px;
background: #ffffff1a;
border-color: #fefafa4d;
margin-top: 13px;
font-family: Noto Sans S Chinese;
font-weight: 550;
font-weight: 500;
color: #fff;
font-size: 20px;
display: flex;
@@ -35,9 +59,46 @@
position: relative;
}
.item-nav:hover {
background: rgba(85, 166, 254, 0.12);
.item-nav:hover,
.item-nav-active,
.item-nav-hovered {
color: #ffffff;
background: linear-gradient(134.25deg,
rgba(0, 98, 217, 0.59) 2.28%,
rgba(0, 98, 217, 0.3) 99.59%) !important;
background-size: cover;
border: 1px solid;
border-color: rgba(255, 255, 255, 0.2);
position: relative;
}
.item-nav:hover::before,
.item-nav-active::before,
.item-nav-hovered::before {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 10px solid rgba(0, 98, 217, 0.45);
pointer-events: none;
}
.item-nav:hover::after,
.item-nav-active::after,
.item-nav-hovered::after {
content: '';
position: absolute;
left: 0;
top: 24px;
width: 77px;
height: 45px;
background: url('../assets/icon/nav-line-logo.svg') no-repeat;
background-size: cover;
}
.item-nav__label {
@@ -52,53 +113,47 @@
.item-nav-content {
width: 155px;
min-height: 970px;
height: calc(100vh - 4rem - 20px);
min-height: calc(100vh - 4rem - 20px);
background: rgba(3, 38, 80, 0.8);
border: 1px solid;
border-color: rgba(43, 143, 254, 0.6);
border-radius: 4px;
backdrop-filter: blur(2px);
position: absolute;
left: 97px;
left: 108px;
top: 0;
z-index: 1000;
padding: 14px 13px 18px 16px;
overflow-y: auto;
}
.item-nav-active {
color: #ffffff;
background: linear-gradient(134.25deg,
rgba(0, 98, 217, 0.59) 2.28%,
rgba(0, 98, 217, 0.3) 99.59%) !important;
background-size: cover;
border: 1px solid;
border-color: rgba(255, 255, 255, 0.2);
position: relative;
}
.item-nav-active::before {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 10px solid rgba(0, 98, 217, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.item-nav-active::after {
.item-nav-content::before {
content: '';
position: absolute;
left: 0;
top: 24px;
width: 77px;
height: 45px;
background: url('../assets/icon/nav-line-logo.svg') no-repeat;
background-size: cover;
left: -30px;
top: 0;
width: 30px;
height: 100%;
}
.item-nav-hover-bridge {
position: absolute;
right: -30px;
top: 0;
width: 30px;
height: 100%;
z-index: 999;
}
.item-nav-content--visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sidebar-flyout-list {
@@ -140,7 +195,7 @@
padding: 3px 0;
font-family: Noto Sans S Chinese;
font-size: 18px;
line-height: 28px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.8);
frontend-web/src/components/page-sidebar-dark.tsx
+77 -73
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import type { ElementType } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import {
@@ -37,18 +37,7 @@ import {
Wrench,
} from "lucide-react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { NotificationDialog } from "@/components/workspace/notification-dialog";
import { SettingsDialog } from "@/components/workspace/settings";
import { useTheme } from "@/contexts/ThemeContext";
import { getStoredAuth } from "@/core/auth";
import { useI18n } from "@/core/i18n/hooks";
import { useUnreadCount } from "@/core/notifications";
import './page-sdebar.css'
type MenuItem = {
@@ -60,13 +49,6 @@ type MenuItem = {
children?: MenuItem[];
};
type PageSidebarDarkProps = {
collapsed: boolean;
onToggleCollapsed: () => void;
};
type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
const menuItems: MenuItem[] = [
{
id: "qa-center",
@@ -158,9 +140,9 @@ const menuItems: MenuItem[] = [
label: "PG中任务",
icon: Folder,
children: [
{ id: "pg-task-pg", label: "任务PG", icon: ListTodo },
{ id: "pg-task-xdpg", label: "XDPG", icon: ListTodo },
{ id: "pg-task-info-pg", label: "信息PG", icon: ListTodo },
{ id: "pg-task-pg", label: "任务PG", icon: ListTodo, path: "/page/strategy/task-management/effect-task-pg" },
{ id: "pg-task-xdpg", label: "XDPG", icon: ListTodo, path: "/page/strategy/task-management/effect-action-pg" },
{ id: "pg-task-info-pg", label: "信息PG", icon: ListTodo, path: "/page/strategy/task-management/effect-info-pg" },
],
},
{
@@ -168,9 +150,9 @@ const menuItems: MenuItem[] = [
label: "TY中任务",
icon: Folder,
children: [
{ id: "ty-task-xdty", label: "XDTY任务", icon: ListTodo },
{ id: "ty-task-plan", label: "方案TY任务", icon: ListTodo },
{ id: "ty-task-xxty", label: "XXTY任务", icon: ListTodo },
{ id: "ty-task-xdty", label: "XDTY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-mechanism" },
{ id: "ty-task-plan", label: "方案TY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-plan" },
{ id: "ty-task-xxty", label: "XXTY任务", icon: ListTodo, path: "/page/strategy/task-management/mnty-task-zsty" },
],
},
],
@@ -278,35 +260,49 @@ function filterMenuItemsByRole(items: MenuItem[], isAdmin: boolean): MenuItem[]
);
}
export function PageSidebarDark({
collapsed,
onToggleCollapsed,
}: PageSidebarDarkProps) {
const { theme } = useTheme();
const isDark = theme === "dark";
export function PageSidebarDark() {
const isAdmin = getStoredAuth()?.system_role === "admin";
const visibleMenuItems = useMemo(
() => filterMenuItemsByRole(menuItems, !!isAdmin),
[isAdmin],
);
const { t } = useI18n();
const { data: unreadCount = 0 } = useUnreadCount();
const [expandedIds, setExpandedIds] = useState<Set<string>>(defaultExpandedIds);
const [settingsOpen, setSettingsOpen] = useState(false);
const [settingsDefaultSection, setSettingsDefaultSection] =
useState<SettingsSection>("appearance");
const [notificationOpen, setNotificationOpen] = useState(false);
const [mounted, setMounted] = useState(false);
const navigate = useNavigate();
const { pathname } = useLocation();
// pathname 变化时取消任何未触发的 hover 关闭计时（cleanup 在卸载时也跑）
useEffect(() => {
setMounted(true);
return () => {
if (hoverCloseTimerRef.current !== null) {
window.clearTimeout(hoverCloseTimerRef.current);
}
};
}, []);
const openSettings = (section: SettingsSection) => {
setSettingsDefaultSection(section);
setSettingsOpen(true);
const handleNavHoverEnter = (id: string) => {
if (hoverCloseTimerRef.current !== null) {
window.clearTimeout(hoverCloseTimerRef.current);
hoverCloseTimerRef.current = null;
}
setHoveredTopId(id);
};
const scheduleNavPanelClose = () => {
if (hoverCloseTimerRef.current !== null) {
window.clearTimeout(hoverCloseTimerRef.current);
}
hoverCloseTimerRef.current = window.setTimeout(() => {
setHoveredTopId(null);
hoverCloseTimerRef.current = null;
}, 180);
};
const closeNavPanel = () => {
if (hoverCloseTimerRef.current !== null) {
window.clearTimeout(hoverCloseTimerRef.current);
hoverCloseTimerRef.current = null;
}
setHoveredTopId(null);
};
const hasActiveChild = (item: MenuItem): boolean => {
@@ -317,18 +313,21 @@ export function PageSidebarDark({
return item.children?.some(hasActiveChild) ?? false;
};
const initialActiveTopItem = visibleMenuItems.find(hasActiveChild) ?? visibleMenuItems[0];
const [activeTopId, setActiveTopId] = useState(initialActiveTopItem?.id ?? "qa-center");
// lazy init：仅在首次 render 计算一次 active id；之后由下面的 useEffect 跟随 pathname 同步
const [activeTopId, setActiveTopId] = useState<string>(
() => visibleMenuItems.find(hasActiveChild)?.id ?? visibleMenuItems[0]?.id ?? "qa-center",
);
const [hoveredTopId, setHoveredTopId] = useState<string | null>(null);
const hoverCloseTimerRef = useRef<number | null>(null);
useEffect(() => {
const matchedTopItem = visibleMenuItems.find(hasActiveChild);
if (matchedTopItem) {
setActiveTopId(matchedTopItem.id);
}
closeNavPanel();
}, [pathname, visibleMenuItems]);
const activeTopItem = visibleMenuItems.find((item) => item.id === activeTopId) ?? initialActiveTopItem;
const toggleExpanded = (id: string) => {
setExpandedIds((prev) => {
const next = new Set(prev);
@@ -345,6 +344,7 @@ export function PageSidebarDark({
setActiveTopId(item.id);
if (!item.children?.length && item.path) {
closeNavPanel();
navigate(item.path);
}
};
@@ -356,6 +356,7 @@ export function PageSidebarDark({
}
if (item.path) {
closeNavPanel();
navigate(item.path);
}
};
@@ -387,34 +388,37 @@ export function PageSidebarDark({
</div>
);
return (
<>
<SettingsDialog
open={settingsOpen}
onOpenChange={setSettingsOpen}
defaultSection={settingsDefaultSection}
/>
<NotificationDialog
open={notificationOpen}
onOpenChange={setNotificationOpen}
/>
{/* TODO: 在这里编写深色主题的侧边栏 HTML 结构 */}
<div className="sidebar-contnet">
<div className="sidebar-contents">
<div className="item-nav-content">
{activeTopItem?.children?.length ? renderFlyoutMenu(activeTopItem.children) : null}
<aside className="sidebar-contnet">
<div className="sidebar-contents">
{visibleMenuItems.map((item) => (
<div
key={item.id}
className="item-nav-group"
onMouseEnter={() => handleNavHoverEnter(item.id)}
onMouseLeave={scheduleNavPanelClose}
>
{item.children?.length ? (
<div
className={`item-nav-content ${hoveredTopId === item.id ? "item-nav-content--visible" : ""}`}
>
{renderFlyoutMenu(item.children)}
</div>
) : null}
<div className="item-nav-wrap">
<button
type="button"
className={`item-nav ${item.id === activeTopId ? "item-nav-active" : ""} ${hoveredTopId === item.id ? "item-nav-hovered" : ""}`}
onClick={() => handleTopItemClick(item)}
>
<span className="item-nav__label">{item.label}</span>
</button>
{item.children?.length && hoveredTopId === item.id ? (
<span className="item-nav-hover-bridge" aria-hidden="true" />
) : null}
</div>
</div>
{visibleMenuItems.map((item) => (
<button
type="button"
key={item.id}
className={`item-nav ${item.id === activeTopId ? "item-nav-active" : ""}`}
onClick={() => handleTopItemClick(item)}
>
<span className="item-nav__label">{item.label}</span>
</button>
))}
</div>
))}
</div>
</>
</aside>
);
}