shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "fix(energy): 日期速选并入 sticky 头部，避免滚动时被遮挡"

Browse Source 
This reverts commit 4153f329b8.
This commit is contained in:
kkfluous
2026-04-30 15:37:17 +08:00
parent 4153f329b8
commit 5958bb581e
5 changed files with 54 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/modules/energy/EnergyModule.tsx
View File

@@ -4,13 +4,6 @@ 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'
@@ -30,16 +23,9 @@ export default function EnergyModule() {
const [activeTab, setActiveTab] = useState<TopTab>('hydrogen');
const [hydroSub, setHydroSub] = useState<HydrogenSubTab>('daily');
const [electricSub, setElectricSub] = useState<ElectricSubTab>('daily');
const [hydroPick, setHydroPick] = useState<DateQuickPick>('last15');
const [electricPick, setElectricPick] = useState<DateQuickPick>('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 (
<div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
@@ -88,32 +74,11 @@ export default function EnergyModule() {
})}
</div>
)}
{/* 日期速选：daily 模式时跟着 sticky，避免滚动后被遮挡 */}
{showQuickPick && (
<div className="px-2 pb-2 pt-1 border-t border-slate-50 flex items-center gap-2 overflow-x-auto">
{QUICK_PICK_OPTIONS.map(opt => {
const active = currentPick === opt.id;
return (
<button
key={opt.id}
onClick={() => setPick(opt.id)}
className={`shrink-0 rounded-lg px-3 py-1 text-[11px] font-bold border transition-colors ${
active
? 'bg-blue-50 text-blue-600 border-blue-200'
: 'bg-white text-slate-500 border-slate-200 hover:bg-slate-50'
}`}
>
{opt.label}
</button>
);
})}
</div>
)}
</div>
</div>
{activeTab === 'hydrogen' && <HydrogenView sub={hydroSub} pick={hydroPick} />}
{activeTab === 'electric' && <ElectricView sub={electricSub} pick={electricPick} />}
{activeTab === 'hydrogen' && <HydrogenView sub={hydroSub} />}
{activeTab === 'electric' && <ElectricView sub={electricSub} />}
{activeTab === 'etc' && <ETCView />}
</div>
</div>