fix: polish roundtable chain rail toggle
This commit is contained in:
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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user