fix: polish roundtable chain rail toggle

This commit is contained in:
董宏凯 committed 2026-07-02 10:14:40 +08:00
1 parent 3e51208024
commit b12497898a
1 file changed
+26 -18
@@ -3032,12 +3032,12 @@ function RoundtableEntryRail({
) : ( ) : (
/* 业务链(公共列表,内部滚动) */ /* 业务链(公共列表,内部滚动) */
<div className="bg-white border border-[#ECE7E4] rounded-2xl p-4 shadow-[0_4px_20px_rgba(0,0,0,0.02)] transition-shadow duration-300 hover:shadow-[0_4px_24px_rgba(45,37,34,0.04)]"> <div className="bg-white border border-[#ECE7E4] rounded-2xl p-4 shadow-[0_4px_20px_rgba(0,0,0,0.02)] transition-shadow duration-300 hover:shadow-[0_4px_24px_rgba(45,37,34,0.04)]">
<div className={cn("flex items-center gap-2", chainSectionExpanded && "mb-3")}> <div className="flex items-center gap-2">
<span className="flex items-center justify-center w-5 h-5 rounded-md bg-primary text-primary-foreground"> <span className="flex items-center justify-center w-5 h-5 rounded-md bg-primary text-primary-foreground">
<Layers className="w-3 h-3" strokeWidth={2.5} /> <Layers className="w-3 h-3" strokeWidth={2.5} />
</span> </span>
<h2 className="text-sm font-semibold tracking-wide text-slate-900">业务链</h2> <h2 className="text-sm font-semibold tracking-wide text-slate-900">业务链</h2>
<span className="ml-auto shrink-0 rounded-full bg-neutral-100 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-500"> <span className="ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-bold tabular-nums leading-none text-neutral-500">
{chains.length} {chains.length}
</span> </span>
<button <button
@@ -3045,20 +3045,30 @@ function RoundtableEntryRail({
onClick={() => setChainSectionExpanded((v) => !v)} onClick={() => setChainSectionExpanded((v) => !v)}
title={chainSectionExpanded ? "收起业务链" : "展开业务链"} title={chainSectionExpanded ? "收起业务链" : "展开业务链"}
aria-expanded={chainSectionExpanded} aria-expanded={chainSectionExpanded}
className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-[#ECE7E4] text-neutral-400 transition-colors hover:border-primary/30 hover:text-primary" className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-[#E6C9C4] bg-white text-neutral-400 transition-colors hover:border-primary/40 hover:text-primary"
> >
{chainSectionExpanded ? ( <ChevronDown
<ChevronUp className="h-3.5 w-3.5" /> className={cn(
) : ( "h-3.5 w-3.5 transition-transform duration-300 ease-out",
<ChevronDown className="h-3.5 w-3.5" /> chainSectionExpanded && "rotate-180",
)} )}
/>
</button> </button>
</div> </div>
{chainSectionExpanded && chains.length === 0 ? ( <div
<p className="text-xs text-slate-400 py-1.5">暂无公共业务链</p> className="grid overflow-hidden transition-all duration-300 ease-out"
) : chainSectionExpanded ? ( style={{
<div className="max-h-[360px] overflow-y-auto pr-1 -mr-1 custom-scrollbar"> gridTemplateRows: chainSectionExpanded ? "1fr" : "0fr",
<div className="flex flex-col gap-2.5 py-0.5"> marginTop: chainSectionExpanded ? 12 : 0,
opacity: chainSectionExpanded ? 1 : 0,
}}
>
<div className="min-h-0 overflow-hidden">
{chains.length === 0 ? (
<p className="text-xs text-slate-400 py-1.5">暂无公共业务链</p>
) : (
<div className="max-h-[360px] overflow-y-auto pr-1 -mr-1 custom-scrollbar">
<div className="flex flex-col gap-2.5 py-0.5">
{chains.map((chain) => { {chains.map((chain) => {
const selected = selectedChainId === chain.id; const selected = selectedChainId === chain.id;
const graphOpen = expandedChainId === chain.id; const graphOpen = expandedChainId === chain.id;
@@ -3225,13 +3235,11 @@ function RoundtableEntryRail({
</div> </div>
); );
})} })}
</div>
</div>
)}
</div> </div>
</div> </div>
) : (
<p className="pt-2 text-[10px] font-medium text-neutral-400">
已收起,可展开查看全部公共业务链。
</p>
)}
</div> </div>
)} )}