From 3e5120802492fd870746d277334db3313952f4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= <hkdong@kland.com.cn>
Date: Thu, 2 Jul 2026 10:06:24 +0800
Subject: [PATCH] feat: add roundtable chain rail scroll

---
 .../pages/RoundtablePlanningPage.tsx          | 78 ++++++++++++-------
 1 file changed, 51 insertions(+), 27 deletions(-)

diff --git a/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
index ffb04607..b7718f96 100644
--- a/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
+++ b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
@@ -2729,7 +2729,8 @@ function LeftSidebar({
       ref={dzRef}
       id="left-sidebar"
       className={cn(
-        "shrink-0 flex flex-col gap-3 overflow-y-auto pr-1 transition-[width] duration-200 ease-out",
+        "min-h-0 shrink-0 flex flex-col gap-3 pr-1 transition-[width] duration-200 ease-out",
+        isStep2 ? "overflow-y-auto" : "overflow-hidden",
         isStep2 && !sidebarExpanded ? "w-[56px]" : "w-[280px]",
       )}
     >
@@ -2911,6 +2912,7 @@ function RoundtableEntryRail({
   businessCode?: string | null;
 }) {
   const [chains, setChains] = useState<BusinessChain[]>([]);
+  const [chainSectionExpanded, setChainSectionExpanded] = useState(true);
   const [expandedChainId, setExpandedChainId] = useState<string | null>(null);
   const { drafts: records, refresh } = useRoundtableDrafts(taskId);
   // 分析记录「按业务链筛选」—— 选项从已加载草稿的 chainTitle 去重得到，
@@ -2961,7 +2963,7 @@ function RoundtableEntryRail({
     let cancelled = false;
     void listChains("public")
       .then((all) => {
-        if (!cancelled) setChains(all.slice(0, 3));
+        if (!cancelled) setChains(all);
       })
       .catch(() => {
         /* 业务链非关键，静默忽略 */
@@ -2985,7 +2987,7 @@ function RoundtableEntryRail({
   };
 
   return (
-    <>
+    <div className="flex min-h-0 flex-1 flex-col gap-3">
       {/* 深链接（taskId）模式：左上角展示「当前任务」（rwfx/3qfx）或「当前行动」（xdfx），替代业务链选择。 */}
       {deeplink ? (
         isXdfx ? (
@@ -3028,33 +3030,50 @@ function RoundtableEntryRail({
         </div>
         )
       ) : (
-      /* 业务链（公共，前 3 个） */
+      /* 业务链（公共列表，内部滚动） */
       <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="flex items-center gap-2 mb-3">
+        <div className={cn("flex items-center gap-2", chainSectionExpanded && "mb-3")}>
           <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">
+            {chains.length}
+          </span>
+          <button
+            type="button"
+            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"
+          >
+            {chainSectionExpanded ? (
+              <ChevronUp className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronDown className="h-3.5 w-3.5" />
+            )}
+          </button>
         </div>
-        {chains.length === 0 ? (
+        {chainSectionExpanded && chains.length === 0 ? (
           <p className="text-xs text-slate-400 py-1.5">暂无公共业务链</p>
-        ) : (
-          <div className="flex flex-col gap-2.5">
-            {chains.map((chain) => {
-              const selected = selectedChainId === chain.id;
-              const graphOpen = expandedChainId === chain.id;
-              const stageGroups = getChainStageGroups(chain);
-              let seatColorIndex = 0;
-              return (
-                <div
-                  key={chain.id}
-                  className={cn(
-                    "rounded-xl border transition-all duration-200",
-                    selected
-                      ? "border-primary/25 bg-primary/5 ring-1 ring-primary/20 shadow-sm"
-                      : "border-[#ECE7E4] bg-neutral-50/50 hover:border-neutral-300 hover:bg-neutral-50",
-                  )}
-                >
+        ) : 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">
+              {chains.map((chain) => {
+                const selected = selectedChainId === chain.id;
+                const graphOpen = expandedChainId === chain.id;
+                const stageGroups = getChainStageGroups(chain);
+                let seatColorIndex = 0;
+                return (
+                  <div
+                    key={chain.id}
+                    className={cn(
+                      "rounded-xl border transition-all duration-200",
+                      selected
+                        ? "border-primary/25 bg-primary/5 ring-1 ring-primary/20 shadow-sm"
+                        : "border-[#ECE7E4] bg-neutral-50/50 hover:border-neutral-300 hover:bg-neutral-50",
+                    )}
+                  >
                   <button
                     type="button"
                     onClick={() => onSelectChain(chain)}
@@ -3203,10 +3222,15 @@ function RoundtableEntryRail({
                       )}
                     </div>
                   )}
-                </div>
-              );
-            })}
+                  </div>
+                );
+              })}
+            </div>
           </div>
+        ) : (
+          <p className="pt-2 text-[10px] font-medium text-neutral-400">
+            已收起，可展开查看全部公共业务链。
+          </p>
         )}
       </div>
       )}
@@ -3342,7 +3366,7 @@ function RoundtableEntryRail({
           </>
         )}
       </div>
-    </>
+    </div>
   );
 }