fix(energy): 日期速选并入 sticky 头部,避免滚动时被遮挡
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
之前「本周/本月/近 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) <noreply@anthropic.com>
This commit is contained in:
@@ -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<CustomerType>('lingniu');
|
||||
const [pick, setPick] = useState<DateQuickPick>('last15');
|
||||
const [months, setMonths] = useState<ElectricMonthGroup[] | null>(null);
|
||||
const [openMonths, setOpenMonths] = useState<Set<string>>(new Set());
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -44,23 +41,6 @@ export default function ElectricDaily() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* 日期速选 */}
|
||||
<div className="flex items-center gap-2 overflow-x-auto -mx-1 px-1 pb-1 snap-x">
|
||||
{QUICK_PICK_OPTIONS.map(opt => (
|
||||
<button
|
||||
key={opt.id}
|
||||
onClick={() => setPick(opt.id)}
|
||||
className={`shrink-0 snap-start rounded-xl px-3 py-1.5 text-[11px] font-bold border transition-colors ${
|
||||
pick === opt.id
|
||||
? '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 className="bg-slate-100 rounded-xl p-1 grid grid-cols-2 gap-1">
|
||||
{(['lingniu', 'external'] as const).map(c => (
|
||||
|
||||
Reference in New Issue
Block a user