From 4153f329b8390226b4ee4ad316f02bd040272e00 Mon Sep 17 00:00:00 2001 From: kkfluous Date: Thu, 30 Apr 2026 15:34:41 +0800 Subject: [PATCH] =?UTF-8?q?fix(energy):=20=E6=97=A5=E6=9C=9F=E9=80=9F?= =?UTF-8?q?=E9=80=89=E5=B9=B6=E5=85=A5=20sticky=20=E5=A4=B4=E9=83=A8?= =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=E6=BB=9A=E5=8A=A8=E6=97=B6=E8=A2=AB?= =?UTF-8?q?=E9=81=AE=E6=8C=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 之前「本周/本月/近 15 天」放在 HydrogenDaily/ElectricDaily 的 内容区第一行，sticky 头部独占顶部。滚动后这一行会从 sticky 头部下方钻过去，露出半截，看起来像被切。 修复：把日期速选行也放进 sticky 头部白卡里： - EnergyModule 持有 hydroPick / electricPick state - 头部第三行（border-t 分割）渲染速选按钮，仅 daily 模式显示 - HydrogenView/ElectricView/ElectricDaily/HydrogenDaily 改为 通过 pick prop 接收，组件内不再 useState 现在头部「Top Tab + Sub Tab + 日期速选」是同一张白卡， 滚动时整体一起 sticky，不再有半截遮挡。 Co-Authored-By: Claude Opus 4.7 (1M context) --- src/modules/energy/ElectricDaily.tsx | 28 +++----------------- src/modules/energy/ElectricView.tsx | 6 +++-- src/modules/energy/EnergyModule.tsx | 39 ++++++++++++++++++++++++++-- src/modules/energy/HydrogenDaily.tsx | 28 +++----------------- src/modules/energy/HydrogenView.tsx | 6 +++-- 5 files changed, 53 insertions(+), 54 deletions(-) diff --git a/src/modules/energy/ElectricDaily.tsx b/src/modules/energy/ElectricDaily.tsx index 8cafa95..58f96e2 100644 --- a/src/modules/energy/ElectricDaily.tsx +++ b/src/modules/energy/ElectricDaily.tsx @@ -6,15 +6,12 @@ import { fetchElectricMonthly } from './api'; import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types'; import RotatingFooterHint from '../../components/RotatingFooterHint'; -const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [ - { id: 'thisWeek', label: '本周' }, - { id: 'thisMonth', label: '本月' }, - { id: 'last15', label: '近 15 天' }, -]; +interface Props { + pick: DateQuickPick; +} -export default function ElectricDaily() { +export default function ElectricDaily({ pick }: Props) { const [customer, setCustomer] = useState('lingniu'); - const [pick, setPick] = useState('last15'); const [months, setMonths] = useState(null); const [openMonths, setOpenMonths] = useState>(new Set()); const [error, setError] = useState(null); @@ -44,23 +41,6 @@ export default function ElectricDaily() { return (
- {/* 日期速选 */} -
- {QUICK_PICK_OPTIONS.map(opt => ( - - ))} -
- {/* 客户类型 */}
{(['lingniu', 'external'] as const).map(c => ( diff --git a/src/modules/energy/ElectricView.tsx b/src/modules/energy/ElectricView.tsx index 0d4fd6a..500d680 100644 --- a/src/modules/energy/ElectricView.tsx +++ b/src/modules/energy/ElectricView.tsx @@ -1,12 +1,14 @@ import ElectricOverview from './ElectricOverview'; import ElectricDaily from './ElectricDaily'; +import type { DateQuickPick } from './types'; export type ElectricSubTab = 'daily' | 'overview'; interface Props { sub: ElectricSubTab; + pick: DateQuickPick; } -export default function ElectricView({ sub }: Props) { - return sub === 'overview' ? : ; +export default function ElectricView({ sub, pick }: Props) { + return sub === 'overview' ? : ; } diff --git a/src/modules/energy/EnergyModule.tsx b/src/modules/energy/EnergyModule.tsx index 0f3d23a..0057b50 100644 --- a/src/modules/energy/EnergyModule.tsx +++ b/src/modules/energy/EnergyModule.tsx @@ -4,6 +4,13 @@ import { motion } from 'motion/react'; import HydrogenView, { type HydrogenSubTab } from './HydrogenView'; import ElectricView, { type ElectricSubTab } from './ElectricView'; import ETCView from './ETCView'; +import type { DateQuickPick } from './types'; + +const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [ + { id: 'thisWeek', label: '本周' }, + { id: 'thisMonth', label: '本月' }, + { id: 'last15', label: '近 15 天' }, +]; type TopTab = 'hydrogen' | 'electric' | 'etc'; type SubTabId = HydrogenSubTab | ElectricSubTab; // 'daily' | 'overview' @@ -23,9 +30,16 @@ export default function EnergyModule() { const [activeTab, setActiveTab] = useState('hydrogen'); const [hydroSub, setHydroSub] = useState('daily'); const [electricSub, setElectricSub] = useState('daily'); + const [hydroPick, setHydroPick] = useState('last15'); + const [electricPick, setElectricPick] = useState('last15'); const showSubTabs = activeTab === 'hydrogen' || activeTab === 'electric'; const currentSub: SubTabId = activeTab === 'electric' ? electricSub : hydroSub; const setSub = (id: SubTabId) => activeTab === 'electric' ? setElectricSub(id) : setHydroSub(id); + // 是否在 daily 模式（需要在 sticky 头部展示日期速选） + const showQuickPick = (activeTab === 'hydrogen' && hydroSub === 'daily') + || (activeTab === 'electric' && electricSub === 'daily'); + const currentPick: DateQuickPick = activeTab === 'electric' ? electricPick : hydroPick; + const setPick = (id: DateQuickPick) => activeTab === 'electric' ? setElectricPick(id) : setHydroPick(id); return (
@@ -74,11 +88,32 @@ export default function EnergyModule() { })}
)} + {/* 日期速选：daily 模式时跟着 sticky，避免滚动后被遮挡 */} + {showQuickPick && ( +
+ {QUICK_PICK_OPTIONS.map(opt => { + const active = currentPick === opt.id; + return ( + + ); + })} +
+ )}
- {activeTab === 'hydrogen' && } - {activeTab === 'electric' && } + {activeTab === 'hydrogen' && } + {activeTab === 'electric' && } {activeTab === 'etc' && }
diff --git a/src/modules/energy/HydrogenDaily.tsx b/src/modules/energy/HydrogenDaily.tsx index 5b381ca..9b52a1c 100644 --- a/src/modules/energy/HydrogenDaily.tsx +++ b/src/modules/energy/HydrogenDaily.tsx @@ -7,14 +7,11 @@ import { fetchHydrogenDaily } from './api'; import type { CustomerType, DateQuickPick, HydrogenDailyRow } from './types'; import RotatingFooterHint from '../../components/RotatingFooterHint'; -const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [ - { id: 'thisWeek', label: '本周' }, - { id: 'thisMonth', label: '本月' }, - { id: 'last15', label: '近 15 天' }, -]; +interface Props { + pick: DateQuickPick; +} -export default function HydrogenDaily() { - const [pick, setPick] = useState('last15'); +export default function HydrogenDaily({ pick }: Props) { const [customer, setCustomer] = useState('lingniu'); const [expanded, setExpanded] = useState>(new Set()); const [rows, setRows] = useState(null); @@ -41,23 +38,6 @@ export default function HydrogenDaily() { return (
- {/* 日期速选 */} -
- {QUICK_PICK_OPTIONS.map(opt => ( - - ))} -
- {/* 客户类型 segmented */}
{(['lingniu', 'external'] as const).map(c => ( diff --git a/src/modules/energy/HydrogenView.tsx b/src/modules/energy/HydrogenView.tsx index c5a24af..fa61afc 100644 --- a/src/modules/energy/HydrogenView.tsx +++ b/src/modules/energy/HydrogenView.tsx @@ -1,12 +1,14 @@ import HydrogenOverview from './HydrogenOverview'; import HydrogenDaily from './HydrogenDaily'; +import type { DateQuickPick } from './types'; export type HydrogenSubTab = 'daily' | 'overview'; interface Props { sub: HydrogenSubTab; + pick: DateQuickPick; } -export default function HydrogenView({ sub }: Props) { - return sub === 'overview' ? : ; +export default function HydrogenView({ sub, pick }: Props) { + return sub === 'overview' ? : ; }