feat: add roundtable chain rail scroll
This commit is contained in:
1 parent
2215ec3c49
commit
3e51208024
1 file changed
+51
-27
@@ -2729,7 +2729,8 @@ function LeftSidebar({
|
|||||||
ref={dzRef}
|
ref={dzRef}
|
||||||
id="left-sidebar"
|
id="left-sidebar"
|
||||||
className={cn(
|
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]",
|
isStep2 && !sidebarExpanded ? "w-[56px]" : "w-[280px]",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@@ -2911,6 +2912,7 @@ function RoundtableEntryRail({
|
|||||||
businessCode?: string | null;
|
businessCode?: string | null;
|
||||||
}) {
|
}) {
|
||||||
const [chains, setChains] = useState<BusinessChain[]>([]);
|
const [chains, setChains] = useState<BusinessChain[]>([]);
|
||||||
|
const [chainSectionExpanded, setChainSectionExpanded] = useState(true);
|
||||||
const [expandedChainId, setExpandedChainId] = useState<string | null>(null);
|
const [expandedChainId, setExpandedChainId] = useState<string | null>(null);
|
||||||
const { drafts: records, refresh } = useRoundtableDrafts(taskId);
|
const { drafts: records, refresh } = useRoundtableDrafts(taskId);
|
||||||
// 分析记录「按业务链筛选」—— 选项从已加载草稿的 chainTitle 去重得到,
|
// 分析记录「按业务链筛选」—— 选项从已加载草稿的 chainTitle 去重得到,
|
||||||
@@ -2961,7 +2963,7 @@ function RoundtableEntryRail({
|
|||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
void listChains("public")
|
void listChains("public")
|
||||||
.then((all) => {
|
.then((all) => {
|
||||||
if (!cancelled) setChains(all.slice(0, 3));
|
if (!cancelled) setChains(all);
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
/* 业务链非关键,静默忽略 */
|
/* 业务链非关键,静默忽略 */
|
||||||
@@ -2985,7 +2987,7 @@ function RoundtableEntryRail({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="flex min-h-0 flex-1 flex-col gap-3">
|
||||||
{/* 深链接(taskId)模式:左上角展示「当前任务」(rwfx/3qfx)或「当前行动」(xdfx),替代业务链选择。 */}
|
{/* 深链接(taskId)模式:左上角展示「当前任务」(rwfx/3qfx)或「当前行动」(xdfx),替代业务链选择。 */}
|
||||||
{deeplink ? (
|
{deeplink ? (
|
||||||
isXdfx ? (
|
isXdfx ? (
|
||||||
@@ -3028,33 +3030,50 @@ function RoundtableEntryRail({
|
|||||||
</div>
|
</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="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">
|
<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">
|
||||||
|
{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>
|
</div>
|
||||||
{chains.length === 0 ? (
|
{chainSectionExpanded && chains.length === 0 ? (
|
||||||
<p className="text-xs text-slate-400 py-1.5">暂无公共业务链</p>
|
<p className="text-xs text-slate-400 py-1.5">暂无公共业务链</p>
|
||||||
) : (
|
) : chainSectionExpanded ? (
|
||||||
<div className="flex flex-col gap-2.5">
|
<div className="max-h-[360px] overflow-y-auto pr-1 -mr-1 custom-scrollbar">
|
||||||
{chains.map((chain) => {
|
<div className="flex flex-col gap-2.5 py-0.5">
|
||||||
const selected = selectedChainId === chain.id;
|
{chains.map((chain) => {
|
||||||
const graphOpen = expandedChainId === chain.id;
|
const selected = selectedChainId === chain.id;
|
||||||
const stageGroups = getChainStageGroups(chain);
|
const graphOpen = expandedChainId === chain.id;
|
||||||
let seatColorIndex = 0;
|
const stageGroups = getChainStageGroups(chain);
|
||||||
return (
|
let seatColorIndex = 0;
|
||||||
<div
|
return (
|
||||||
key={chain.id}
|
<div
|
||||||
className={cn(
|
key={chain.id}
|
||||||
"rounded-xl border transition-all duration-200",
|
className={cn(
|
||||||
selected
|
"rounded-xl border transition-all duration-200",
|
||||||
? "border-primary/25 bg-primary/5 ring-1 ring-primary/20 shadow-sm"
|
selected
|
||||||
: "border-[#ECE7E4] bg-neutral-50/50 hover:border-neutral-300 hover:bg-neutral-50",
|
? "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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => onSelectChain(chain)}
|
onClick={() => onSelectChain(chain)}
|
||||||
@@ -3203,10 +3222,15 @@ function RoundtableEntryRail({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="pt-2 text-[10px] font-medium text-neutral-400">
|
||||||
|
已收起,可展开查看全部公共业务链。
|
||||||
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -3342,7 +3366,7 @@ function RoundtableEntryRail({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user