fix: polish roundtable chain rail toggle

frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx

@@ -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={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">
             <Layers className="w-3 h-3" strokeWidth={2.5} />
           </span>
           <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}
           </span>
           <button
@@ -3045,20 +3045,30 @@ function RoundtableEntryRail({
             onClick={() => setChainSectionExpanded((v) => !v)}
             title={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 ? (
-              <ChevronUp className="h-3.5 w-3.5" />
-            ) : (
-              <ChevronDown className="h-3.5 w-3.5" />
-            )}
+            <ChevronDown
+              className={cn(
+                "h-3.5 w-3.5 transition-transform duration-300 ease-out",
+                chainSectionExpanded && "rotate-180",
+              )}
+            />
           </button>
         </div>
-        {chainSectionExpanded && chains.length === 0 ? (
-          <p className="text-xs text-slate-400 py-1.5">暂无公共业务链</p>
-        ) : chainSectionExpanded ? (
-          <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">
+        <div
+          className="grid overflow-hidden transition-all duration-300 ease-out"
+          style={{
+            gridTemplateRows: chainSectionExpanded ? "1fr" : "0fr",
+            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) => {
                 const selected = selectedChainId === chain.id;
                 const graphOpen = expandedChainId === chain.id;
@@ -3225,13 +3235,11 @@ function RoundtableEntryRail({
                   </div>
                 );
               })}
+                </div>
+              </div>
+            )}
             </div>
           </div>
-        ) : (
-          <p className="pt-2 text-[10px] font-medium text-neutral-400">
-            已收起，可展开查看全部公共业务链。
-          </p>
-        )}
       </div>
       )}