feat(圆桌): 业务链条配置页流程图点阵放大 + 侧边栏菜单项按设计稿还原

- ChainFlowDiagram 点阵背景点尺寸/不透明度上调,更接近设计稿颗粒感
- 全局侧边栏菜单项:锐利方角(2px)、选中整高左竖条、图标 hover 微放大、间距微调;保留原菜单内容与红/青配色

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
董宏凯andClaude Opus 4.8 committed 2026-06-13 18:41:50 +08:00
1 parent 61754acb87
commit 25dbeb7a9a
2 files changed
+14 -6

No files matched your search

+11 -4
View File
@@ -77,8 +77,8 @@ export function PageSidebar({
compact ? "max-w-0 opacity-0" : "max-w-[220px] opacity-100"
} ${small ? "text-xs" : "text-sm"} flex-1 font-medium`;
const menuButtonClass = (isActive: boolean, depth = 0) =>
`flex w-full items-center rounded-lg py-2 text-left transition-all duration-300 ease-out hover:-translate-y-0.5 theme-transition ${
collapsed && depth === 0 ? "justify-center px-2" : "gap-2 px-3"
`group relative flex w-full items-center rounded-[2px] py-2 text-left transition-all duration-300 ease-out theme-transition ${
collapsed && depth === 0 ? "justify-center px-2" : "gap-3 px-3"
} ${
isActive
? isDark
@@ -114,7 +114,14 @@ export function PageSidebar({
onClick={() => item.path && navigate(item.path)}
className={menuButtonClass(isActive, depth)}
>
<Icon className={`${depth === 0 ? "h-5 w-5" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out`} />
{isActive && (
<span
className={`absolute left-0 inset-y-0 w-[3px] rounded-r ${
isDark ? "bg-cyan-300" : "bg-red-600"
}`}
/>
)}
<Icon className={`${depth === 0 ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105`} />
{(!collapsed || depth > 0) && (
<span className={labelClass(false, depth > 0)}>
{item.label}
@@ -144,7 +151,7 @@ export function PageSidebar({
className={menuButtonClass(false, depth)}
>
<Icon
className={`${isTopLevel ? "h-5 w-5" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out ${
className={`${isTopLevel ? "h-[18px] w-[18px]" : "h-4 w-4"} flex-shrink-0 transition-transform duration-300 ease-out group-hover:scale-105 ${
expanded && depth > 0 ? "scale-105" : ""
}`}
/>
@@ -250,9 +250,10 @@ export function ChainFlowDiagram({ stages, onNodeClick, className }: ChainFlowDi
grabbing ? "cursor-grabbing" : "cursor-grab",
)}
style={{
// 点阵背景:放大点尺寸(参考「业务链条配置器」设计稿,点更明显)。
backgroundImage:
"radial-gradient(circle, rgba(148,163,184,0.18) 1px, transparent 1px)",
backgroundSize: "24px 24px",
"radial-gradient(circle, rgba(148,163,184,0.4) 1.3px, transparent 1.3px)",
backgroundSize: "22px 22px",
}}
onPointerDown={(e) => {
if (e.button !== 0) return;