|
|
@@ -1,5 +1,4 @@
|
|
|
import { useEffect, useState } from 'react';
|
|
|
-import { CalendarRange } from 'lucide-react';
|
|
|
import { useMutation } from '@tanstack/react-query';
|
|
|
import { queryFunnel, USE_MOCK } from '../../api/funnel';
|
|
|
import type {
|
|
|
@@ -47,8 +46,8 @@ export function FunnelPage() {
|
|
|
|
|
|
return (
|
|
|
<div className="flex flex-col gap-5 w-full">
|
|
|
- {/* 标题行:标题 + Mock 徽章 在左,控件 ml-auto 落右 */}
|
|
|
- <div className="flex items-center gap-3 flex-wrap">
|
|
|
+ {/* 标题行:标题 + Mock 徽章 在左,控件 ml-auto 落右;时间边界在控件正下方 */}
|
|
|
+ <div className="flex items-start gap-3 flex-wrap">
|
|
|
<h2 className="text-xl font-semibold tracking-tight m-0">漏斗分析</h2>
|
|
|
{USE_MOCK && (
|
|
|
<Badge
|
|
|
@@ -59,7 +58,7 @@ export function FunnelPage() {
|
|
|
Mock 模式
|
|
|
</Badge>
|
|
|
)}
|
|
|
- <div className="ml-auto">
|
|
|
+ <div className="ml-auto flex flex-col items-end gap-1">
|
|
|
{/* 单日 / 近7天 / 近30天 三选一,选中 mint 高亮;单日可选历史。 */}
|
|
|
<TimePeriodSelect
|
|
|
period={period}
|
|
|
@@ -70,6 +69,12 @@ export function FunnelPage() {
|
|
|
}}
|
|
|
onPickRolling={(p) => setPeriod(p)}
|
|
|
/>
|
|
|
+ {/* 时间边界:简短日期,不含今日 */}
|
|
|
+ {mutation.data?.snapshot_dt && (
|
|
|
+ <span className="text-xs text-muted-foreground">
|
|
|
+ {funnelRangeText(period, mutation.data.snapshot_dt)} · 不含今日
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -77,17 +82,6 @@ export function FunnelPage() {
|
|
|
拼团漏斗:启动 → 曝光 → 拼团详情 → 下单 → 成功
|
|
|
</p>
|
|
|
|
|
|
- {/* 时间边界 —— 简洁展示这次漏斗覆盖的日期范围,不含今日 */}
|
|
|
- {mutation.data?.snapshot_dt && (
|
|
|
- <div className="flex items-center gap-1.5 text-sm m-0">
|
|
|
- <CalendarRange className="size-4 shrink-0 text-primary" />
|
|
|
- <span className="font-medium text-foreground">
|
|
|
- {funnelRangeText(period, mutation.data.snapshot_dt)}
|
|
|
- </span>
|
|
|
- <span className="text-muted-foreground">(不含今日)</span>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
<FunnelResult
|
|
|
data={mutation.data}
|
|
|
isLoading={mutation.isPending}
|