Kaynağa Gözat

fix: 日期范围文案固定占位,消除显示/隐藏挤动页面

tianyu.chu 1 ay önce
ebeveyn
işleme
2fa0535a90
2 değiştirilmiş dosya ile 11 ekleme ve 7 silme
  1. 3 0
      CHANGELOG.md
  2. 8 7
      apps/web/src/modules/funnel/FunnelPage.tsx

+ 3 - 0
CHANGELOG.md

@@ -4,6 +4,9 @@
 
 ## 2026-06-26
 
+### 修复
+- **日期范围文案挤动页面**(`apps/web` `FunnelPage`):右上角日期范围(如 `2026-06-15 ~ 2026-06-21`)原是条件挂载/卸载,显示↔隐藏(单日↔近7/30天切换、pending→加载完)时控件列高度变化,撑动外层行,把下方图表整体顶动。改为**始终占位**(`h-4` 固定行高,空内容不塌缩),仅滚动周期且查询完成时填文案——高度恒定,不再抖动。
+
 ### 新增
 - **后端上线:服务器单进程同源托管(真实数据)**(`infra/` + 服务器):线上 `http://100.64.0.62:8080/` 从 mock 切到**真实 PG 数据**。
   - 服务器装**隔离 Miniconda Python 3.11**(`~/miniconda3`,py311_24.7.1,兼容 CentOS7 glibc 2.17;新版 Miniconda 要 glibc≥2.28 故选旧版),pip 仅装运行时依赖(`--only-binary` 走 manylinux2014 轮子,无需编译器);**不动系统 3.6/3.7 环境**。

+ 8 - 7
apps/web/src/modules/funnel/FunnelPage.tsx

@@ -68,13 +68,14 @@ export function FunnelPage() {
             }}
             onPickRolling={(p) => setPeriod(p)}
           />
-          {/* 滚动周期显示日期范围;单日不显示。查询 pending 时不渲染,
-              避免用旧 snapshot_dt 配新 period 算出错误范围。 */}
-          {!mutation.isPending && mutation.data?.snapshot_dt && period !== 'day' && (
-            <span className="text-xs text-muted-foreground">
-              {funnelRangeText(period, mutation.data.snapshot_dt)}
-            </span>
-          )}
+          {/* 日期范围槽:始终占位(固定行高),避免显示/隐藏时挤动下方内容。
+              仅滚动周期且查询完成时填文案;单日 / pending 期间留空但不塌缩
+              (pending 不填,避免用旧 snapshot_dt 配新 period 算出错误范围)。 */}
+          <span className="h-4 text-xs leading-4 text-muted-foreground">
+            {!mutation.isPending && mutation.data?.snapshot_dt && period !== 'day'
+              ? funnelRangeText(period, mutation.data.snapshot_dt)
+              : ''}
+          </span>
         </div>
       </div>