Procházet zdrojové kódy

fix(web): 时间边界条挪到控件下方+精简+去图标

tianyu.chu před 1 měsícem
rodič
revize
a6f752ec25

+ 9 - 15
apps/web/src/modules/funnel/FunnelPage.tsx

@@ -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}

+ 3 - 4
apps/web/src/modules/funnel/__tests__/FunnelPage.test.tsx

@@ -133,12 +133,11 @@ describe('FunnelPage — fixed funnel + period selection', () => {
     }
   });
 
-  it('shows a prominent time-boundary line (range + 不含今日)', async () => {
+  it('shows a terse time-boundary line under the control (date + 不含今日)', async () => {
     queryFunnelMock.mockResolvedValue(readyResponse());
     renderPage();
-    // default 单日 → 「数据日期 <snapshot>」 + 「不含今日」
-    expect(await screen.findByText(/数据日期 2026-06-23/)).toBeInTheDocument();
-    expect(screen.getByText(/不含今日/)).toBeInTheDocument();
+    // default 单日 → 「2026-06-23 · 不含今日」(精简,无"数据日期"前缀)
+    expect(await screen.findByText(/2026-06-23 · 不含今日/)).toBeInTheDocument();
   });
 
   /** Open the always-on 单日 calendar popover and return its dialog. */

+ 6 - 7
apps/web/src/modules/funnel/period.ts

@@ -29,24 +29,23 @@ function parseSnapshot(dt: string): Date {
 }
 
 /**
- * 时间边界文案 —— 显示这次漏斗覆盖的日期范围(响应的 `snapshot_dt` 为"止/快照日",yyyyMMdd):
- *   单日   → 「数据日期 2026-06-24」
- *   近7天  → 「近 7 天 2026-06-18 ~ 2026-06-24」
- *   近30天 → 「近 30 天 2026-05-26 ~ 2026-06-24」
+ * 时间边界文案(精简)—— 只给日期,周期标签已在按钮上(`snapshot_dt` 为止/快照日,yyyyMMdd):
+ *   单日   → 「2026-06-24」
+ *   近7天  → 「2026-06-18 ~ 2026-06-24」
+ *   近30天 → 「2026-05-26 ~ 2026-06-24」
  */
 export function funnelRangeText(
   period: FunnelPeriod,
   snapshotDt: string,
 ): string {
   if (!/^\d{8}$/.test(snapshotDt)) return formatSnapshotDt(snapshotDt);
+  if (period === 'day') return formatSnapshotDt(snapshotDt);
   const end = parseSnapshot(snapshotDt);
-  if (period === 'day') return `数据日期 ${formatSnapshotDt(snapshotDt)}`;
   const span = period === 'last_7d' ? 7 : 30;
   const start = new Date(end);
   start.setDate(start.getDate() - (span - 1));
   const startStr = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-${String(start.getDate()).padStart(2, '0')}`;
-  const win = period === 'last_7d' ? '近 7 天' : '近 30 天';
-  return `${win} ${startStr} ~ ${formatSnapshotDt(snapshotDt)}`;
+  return `${startStr} ~ ${formatSnapshotDt(snapshotDt)}`;
 }
 
 /** Local-midnight `Date` for yesterday — the latest selectable / queryable day (data is T+1). */

+ 39 - 0
infra/look.sh

@@ -0,0 +1,39 @@
+#!/usr/bin/env bash
+# /look —— 一键:验证 → 构建 → 推 feature(源码)+ deploy(产物)→ 服务器拉取 → 上线
+# 用法:bash infra/look.sh ["提交说明"]
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+MSG="${1:-chore: update}"
+SERVER="bigdata@100.64.0.62"
+SERVER_DIR="\$HOME/hs-data"   # 服务器上 deploy 分支的 clone
+URL="http://100.64.0.62:8080/"
+
+echo "==> 1/5 验证 + 构建"
+corepack pnpm@10 --filter @hs-data/web test
+corepack pnpm@10 --filter @hs-data/web build
+
+echo "==> 2/5 源码 → feature"
+git add -A
+git diff --cached --quiet || git commit -q -m "$MSG"
+git push -q origin feature
+
+echo "==> 3/5 产物 → deploy 分支(worktree 快进推送,无 force)"
+git fetch -q origin deploy
+WT="../hs-deploy-tmp"
+git worktree remove -f "$WT" 2>/dev/null || true
+git worktree add -f "$WT" origin/deploy >/dev/null
+find "$WT" -mindepth 1 -maxdepth 1 ! -name .git -exec rm -rf {} +
+cp -r apps/web/dist/. "$WT"/
+(
+  cd "$WT"
+  git add -A
+  git diff --cached --quiet || git commit -q -m "deploy: $MSG"
+  git push -q origin HEAD:deploy
+)
+git worktree remove -f "$WT"
+
+echo "==> 4/5 服务器拉取(git pull,非 scp)"
+ssh -o BatchMode=yes "$SERVER" "cd $SERVER_DIR && GIT_TERMINAL_PROMPT=0 git pull -q && echo pulled-ok"
+
+echo "==> 5/5 完成 → $URL"