GroupedMarketTable 单选时区时隐藏分组标题行

groups.length === 1 时直接展示扁平表格,多时区(ALL)时保留可折叠分组。
This commit is contained in:
2569718930@qq.com
2026-05-25 03:50:59 +08:00
parent 43231d4474
commit 446e303743
@@ -47,6 +47,7 @@ export function GroupedMarketTable({
const labelActive = isEn ? "Active" : "活跃"; const labelActive = isEn ? "Active" : "活跃";
const labelWatch = isEn ? "Watch" : "观察"; const labelWatch = isEn ? "Watch" : "观察";
const showHeaders = groups.length > 1;
return ( return (
<div className="overflow-auto h-full"> <div className="overflow-auto h-full">
@@ -65,36 +66,35 @@ export function GroupedMarketTable({
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{groups.map((group) => { {groups.flatMap((group) => {
const isExpanded = !collapsed.has(group.key); const isExpanded = !collapsed.has(group.key);
const label = isEn ? group.labelEn : group.labelZh; const rows = showHeaders && !isExpanded ? [] : group.rows;
return ( return (
<Fragment key={group.key}> <Fragment key={group.key}>
{/* Group header row */} {showHeaders && (
<tr className="border-b border-slate-200 bg-[#eef2f6]"> <tr className="border-b border-slate-200 bg-[#eef2f6]">
<td colSpan={9} className="p-0"> <td colSpan={9} className="p-0">
<button <button
type="button" type="button"
onClick={() => toggleGroup(group.key)} onClick={() => toggleGroup(group.key)}
className="flex w-full items-center gap-2 px-3 py-1 text-left hover:bg-[#e2e8f0] transition-colors" className="flex w-full items-center gap-2 px-3 py-1 text-left hover:bg-[#e2e8f0] transition-colors"
> >
<span className="grid h-4 w-4 place-items-center text-slate-400"> <span className="grid h-4 w-4 place-items-center text-slate-400">
{isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />} {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
</span> </span>
<span className="text-[11px] font-black uppercase tracking-wide text-slate-600"> <span className="text-[11px] font-black uppercase tracking-wide text-slate-600">
{label} {isEn ? group.labelEn : group.labelZh}
</span> </span>
<span className="text-[10px] text-slate-400"> <span className="text-[10px] text-slate-400">
{group.rows.length} · {labelActive} {group.activeCount} · {labelWatch} {group.watchCount} {group.rows.length} · {labelActive} {group.activeCount} · {labelWatch} {group.watchCount}
{group.localTimeRange ? ` · LT ${group.localTimeRange}` : ""} {group.localTimeRange ? ` · LT ${group.localTimeRange}` : ""}
{group.hotCity ? ` · Hot: ${group.hotCity}` : ""} {group.hotCity ? ` · Hot: ${group.hotCity}` : ""}
</span> </span>
</button> </button>
</td> </td>
</tr> </tr>
{/* Data rows */} )}
{isExpanded && {rows.map((row) => {
group.rows.map((row) => {
const signal = getSignalState(row); const signal = getSignalState(row);
const gapColor = GAP_COLOR_MAP[getGapColor(row)]; const gapColor = GAP_COLOR_MAP[getGapColor(row)];
return ( return (