diff --git a/docs/BUG_HISTORY.md b/docs/BUG_HISTORY.md index de4c805c..83b64292 100644 --- a/docs/BUG_HISTORY.md +++ b/docs/BUG_HISTORY.md @@ -14833,3 +14833,58 @@ - 相关记录：BUG-1076、`TASK-chart-types-and-report-buttons-20260928.md` T3；本任务书明确有限修订旧约定。 - 复发自：无；产品术语能力范围的收口，不是 D1 冒充分盘复发。 - 修复版本：`codex/chart-surface-polish-20260929` 工作区，未提交、未推送。 + +## BUG-1100 | 星盘页印度盘外框比星图宽一截，左右大片留白 + +- 状态：resolved（代码 + 回归测试；未部署时写于分支，真机欠） +- 首次发现 / 最近更新：2026-09-29 / 2026-09-29 +- 影响面：`globals.css` 桌面断点 `.chart-page-vedic-plot` / `.chart-page-vedic-stage`。 +- 用户现象（产品截图）：星图四周多了一张更宽的卡片，「框太丑」。 +- 触发条件：≥1024px 桌面。 +- 根因：`64aa0ec2`（TASK-chart-surface-polish T5）把 440px 上限加在外框内的绘图区上，外框仍随栅格列拉宽。 +- 修复：上限移到外框（440px + 两侧内边距 + 边框），绘图区在框内撑满；手机端不设上限。等待骨架在同一外框里，揭幕不跳尺寸。 +- 验证：`frontend/tests/chart-page-mobile-width-20260929.test.ts`（断言改动三栏见 PROGRESS）、`surface-feedback-20260929.test.tsx`。 +- 防复发：尺寸上限加在带边框的容器上，不加在它的内层。 +- 相关记录：BUG-1098、BUG-1099（同一提交的其他项） +- 复发自：无 +- 修复版本：分支 `codex/surface-feedback-20260929` + +## BUG-1101 | 星盘图标说明显示在盘下一行字，不是图标旁的气泡；还常驻一句「停在或轻点……」 + +- 状态：resolved（代码 + 回归测试；手机真机欠） +- 首次发现 / 最近更新：2026-09-29 / 2026-09-29 +- 影响面：`components/chart-page/chart-symbol-help.tsx`、`western-wheel-svg.tsx`、`globals.css`。 +- 用户现象：鼠标停在行星符号上，说明出现在盘下方；产品要的是图标旁弹出气泡，且不要那句常驻提示。 +- 根因：`64aa0ec2` 按「说明在盘外预留区域，不遮挡图标」实现为盘下状态行，与产品要的交互不同。 +- 修复：同一交互入口改为锚在标记旁的气泡（上方优先、近顶翻下、左右夹在外框内、不接收指针）；电脑悬停 / 点击 / 键盘聚焦出现；手机轻点出现，触摸离开事件不关，点盘外或 3 秒自动关；读屏保留隐藏 `role="status"`。西洋盘的「最近行星」解析结果同时给出锚点。删除提示句。 +- 验证：`chart-symbol-help.test.tsx` 原 4 条不改断言全部通过；新增定位纯函数与触摸时序测试。几何与真实触摸需真机（清单）。 +- 防复发：说明形态以产品描述为准；「不遮挡」由气泡不接收指针、避让边缘满足，而不是挪到盘外。 +- 相关记录：BUG-1100 +- 复发自：无 +- 修复版本：分支 `codex/surface-feedback-20260929` + +## BUG-1102 | 「那一刻的天空」按钮慢一秒才出现，且不显眼 + +- 状态：resolved（代码 + 回归测试；真机欠） +- 首次发现 / 最近更新：2026-09-29 / 2026-09-29 +- 影响面：`hooks/use-birth-sky-cover.ts`、`components/birth-sky/birth-sky-entry.tsx`、`chart-page-view.tsx`、`globals.css`。 +- 用户现象：进星盘后右上角按钮约一秒后才出现；细线框小按钮不明显。 +- 根因：按钮渲染条件是「封面 PNG 已画好」（TASK-birth-sky-cover T3 的设计），画图需要网络 + 离屏绘制。 +- 修复：钩子返回 `{ cover, pending }`；星盘就绪即显示按钮，封面在画时点击被记下，画好立即开播；失败时按钮消失。样式改星芒图标 + accent 浅底。 +- 验证：`surface-feedback-20260929.test.tsx`；`birth-sky-replay-20260929.test.ts` 一条断言按三栏更新，`chart-page-view.test.tsx` 既有「没有封面也不在加载时不显示」断言不变。 +- 防复发：入口按钮不等待次要资源；需要资源的动作在点击后等待并由动作本身承担等待。 +- 相关记录：TASK-birth-sky-cover-20260928、TASK-mobile-chart-and-confirmed-edit-20260929 M4 +- 复发自：无 +- 修复版本：分支 `codex/surface-feedback-20260929` + +## BUG-1103 | 「我的报告」生成卡片贴着顶栏；标题「生成个人报告」与按钮「生成报告」重复 + +- 状态：resolved（代码 + 回归测试） +- 首次发现 / 最近更新：2026-09-29 / 2026-09-29 +- 影响面：`personal-report-center.tsx`、`globals.css .report-center-create`。 +- 根因：BUG-1094 改版时卡片上外边距为 0；标题与按钮都写了动作。 +- 修复：卡片上方 `--space-6`；标题改「完整本命报告」，说明一句写 6 章与中英两版，按钮仍「生成报告」（产品选定）。 +- 验证：`surface-feedback-20260929.test.tsx`。 +- 相关记录：BUG-1094 +- 复发自：BUG-1094 的遗漏 +- 修复版本：分支 `codex/surface-feedback-20260929` diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md index 3ec02b9d..ebbe00a7 100644 --- a/frontend/DESIGN.md +++ b/frontend/DESIGN.md @@ -565,7 +565,7 @@ one skeleton, none of them carrying the sidebar. ### Personal report centre -- **Structure:** inside the app shell, not a page of its own. The name 「我的报告」 sits alone in the 46px header. The body opens with the **generate card** (`.report-center-create`, 2026-09-29, product sketch): a centred `--color-canvas` sheet with a file icon, 「生成个人报告」, one line 「创建后即可离开，完成时下方列表会自动更新。」 and the filled 「生成报告」 button — the page's only generate entry; the header button was deleted rather than kept as a second one. Below it, 「过往的报告」 heads the **row list** of reports; with none yet, a single quiet line 「还没有个人报告。」 replaces the old second big empty card. The supporting paragraph (「有填报到分钟的出生时间即可生成……」) and the 「共 N 份 · 已完成 N 份」 overview line above it were removed on 2026-09-28 (TASK-self-edit-avatar-menu-20260928 S3, product: 「这里的提示去掉」); the minute requirement still lives in the 生成 button's hover title. +- **Structure:** inside the app shell, not a page of its own. The name 「我的报告」 sits alone in the 46px header. The body opens with the **generate card** (`.report-center-create`, 2026-09-29, product sketch): a centred `--color-canvas` sheet, `--space-6` below the header (BUG-1103: it used to sit flush under it), with a file icon, the title 「完整本命报告」 (what you get), one line 「星盘、力量、大运、年运、瑜伽共 6 章，中英两版；生成后可离开，完成时下方自动出现。」 and the filled 「生成报告」 button (what it does) — title and button no longer say the same thing — the page's only generate entry; the header button was deleted rather than kept as a second one. Below it, 「过往的报告」 heads the **row list** of reports; with none yet, a single quiet line 「还没有个人报告。」 replaces the old second big empty card. The supporting paragraph (「有填报到分钟的出生时间即可生成……」) and the 「共 N 份 · 已完成 N 份」 overview line above it were removed on 2026-09-28 (TASK-self-edit-avatar-menu-20260928 S3, product: 「这里的提示去掉」); the minute requirement still lives in the 生成 button's hover title. It used to be a standalone full-screen route with a `report-center-shell` root, a `report-center-topbar` holding one 「返回对话」 link, and a `report-center-hero` with a page-sized h1 — the sidebar vanished the moment you opened it, and the only way back was that link. - **Row list, not a card grid:** `.report-center-list` is one column of `.report-center-row`, hairline-separated by a 1px grid gap over a `--color-border` ground so each boundary is a single rule rather than two touching borders. A card grid costs one scan per card; past five or six reports the reader is looking for state, and a single column puts every status chip on the same x. D12. - **Row anatomy:** status chip, then the title at `--type-title-md`/500, then the meta line (creation time · depth · themes) at `--type-caption` with `tabular-nums`, then — for a ready report — its stored card summary, or for a failed one the failure reason. Actions sit right-aligned on the same row and wrap under the body at the global 767px cut. @@ -1019,9 +1019,9 @@ D40 / D45 / D60 的表格上方，出生时间不是「已校正」时多一句 **不再按断点复制参数。** 原本同一组参数有三种画法：中宫叠一张 `.chart-page-center-card`（手机两行、桌面六行），盘下方再来一张 `.chart-page-params-below` 重复那六行，由 media query 三选一。同样的事实画三遍、靠断点开关，改一处要改三处。键值表让每个字段只出现一次，`.chart-page-center-card` / `-compact` / `-extra` / `.chart-page-params-below` / `.chart-page-boundary-desktop` 五个类连同它们的 767/768 开关块一并删除，由 `chart-page-view.test.tsx` 守着不许回来。 -桌面（≥1024）盘面与参数表左右并排，行星表是跨两列的整行——它的列宽需要完整版心。2026-09-29 起，印度内部 `.chart-page-vedic-plot` 绘图区上限 440px 并居中，外框 padding 不计入盘宽；西洋桌面绘图区上限 480px。低于此断点的结果盘不收紧，参数区和表格不缩。等待盘与结果盘复用同一桌面列宽与绘图容器，不再使用独立 400px 等待盘上限；印度等待绘图容器以 400/452 比例预留结果图例带，内部空 SVG 仍为 400×400，避免揭幕时外框和说明区纵向跳动，不改共享绘图。只有盘位呼吸，失败后退出，参数表不新增骨架。 +桌面（≥1024）盘面与参数表左右并排，行星表是跨两列的整行——它的列宽需要完整版心。2026-09-29 起桌面印度盘宽 440px；当晚（BUG-1100，产品「框太丑」）上限从绘图区移到外框 `.chart-page-vedic-stage`（440px + 两侧 `--space-3` 内边距 + 边框），外框贴合星图，不再是一张宽卡片中间放一张窄盘；手机端外框不设上限；西洋桌面绘图区上限 480px。低于此断点的结果盘不收紧，参数区和表格不缩。等待盘与结果盘复用同一桌面列宽与绘图容器，不再使用独立 400px 等待盘上限；印度等待绘图容器以 400/452 比例预留结果图例带，内部空 SVG 仍为 400×400，避免揭幕时外框和说明区纵向跳动，不改共享绘图。只有盘位呼吸，失败后退出，参数表不新增骨架。 -**符号说明（2026-09-29）。** `/chart` 开启共享 SVG 的可选交互模式：鼠标悬停、键盘聚焦与手机轻点都在盘下预留说明区显示同一事实说明，不覆盖邻近图标；Esc、离开、失焦可关闭，切盘/人物/数据身份变化清理旧说明。行星与其逆行短线共用一个目标；西洋 caption 和命中圆用一致的行星解析，原点击过滤相位及再次点击取消保留。报告、校正、静态导出默认不启用该模式；纯绘图层不持有 hooks，静态 SVG 白名单不扩。 +**符号说明（2026-09-29；当晚改为气泡，BUG-1101）。** `/chart` 开启共享 SVG 的可选交互模式：说明是标记旁的小气泡（`.chart-symbol-bubble`，最宽 220px，`--color-canvas` 底 + 细边 + `--shadow-elevated`），默认在标记上方 8px，离外框顶不足 48px 时翻到下方，左右被夹在外框内；气泡不接收指针，不会挡住旁边的标记。电脑：鼠标悬停出现、移开消失，点击与键盘聚焦同样出现。手机：轻点标记出现，触摸产生的离开事件不关它，点盘外任意处或 3 秒后自动消失。盘下不再有「停在或轻点……」提示行和说明行；读屏器仍从一个隐藏的 `role="status"` 读到同一句话；Esc、离开、失焦可关闭，切盘/人物/数据身份变化清理旧说明。行星与其逆行短线共用一个目标；西洋 caption 和命中圆用一致的行星解析，原点击过滤相位及再次点击取消保留。报告、校正、静态导出默认不启用该模式；纯绘图层不持有 hooks，静态 SVG 白名单不扩。 盘内 SVG 文字用 CSS 提到 16px viewBox 单位，使约 318px 盘宽下实际像素不低于 12px。Tab、盘型 chip 均 44px。 @@ -1178,7 +1178,7 @@ D40 / D45 / D60 的表格上方，出生时间不是「已校正」时多一句 ### 位置一：星盘页顶栏按钮 -- 星盘页 `ok` 后立即预取 `/api/birth-sky?subject=<当前人物>` 并在屏外画好 PNG；**画好之后**顶栏右侧才出现一枚描边按钮「那一刻的天空」（` - {open ? setOpen(false)} /> : null} + {open ? setWanted(false)} /> : null} ); } diff --git a/frontend/src/components/chart-page/chart-page-view.tsx b/frontend/src/components/chart-page/chart-page-view.tsx index c4ea1471..f7717f6a 100644 --- a/frontend/src/components/chart-page/chart-page-view.tsx +++ b/frontend/src/components/chart-page/chart-page-view.tsx @@ -34,7 +34,8 @@ export function ChartPageRoute() { pendingLayers={pendingLayers} layerFailures={layerFailures} onNeedLayer={requestLayer} - birthSky={birthSky} + birthSky={birthSky.cover} + birthSkyPending={birthSky.pending} /> ); } @@ -74,6 +75,7 @@ export function ChartPageView({ onNeedLayer, initialTab = "vedic", birthSky = null, + birthSkyPending = false, }: { view: ChartViewResponse | null; pendingLayers?: ReadonlySet; @@ -82,6 +84,8 @@ export function ChartPageView({ initialTab?: ChartViewTabId; /** Painted cover for the header button; null until ready, and after any failure. */ birthSky?: BirthSkyCover | null; + /** The cover is still painting: the button already shows and opens when it lands. */ + birthSkyPending?: boolean; }) { const [tab, setTab] = useState(initialTab); const [vargaId, setVargaId] = useState("D1"); @@ -108,7 +112,7 @@ export function ChartPageView({ : undefined} + actions={view?.status === "ok" && (birthSky || birthSkyPending) ? : undefined} > {view != null && view.status !== "ok" ? (
diff --git a/frontend/src/components/chart-page/chart-symbol-help.tsx b/frontend/src/components/chart-page/chart-symbol-help.tsx index c3396527..34e45cea 100644 --- a/frontend/src/components/chart-page/chart-symbol-help.tsx +++ b/frontend/src/components/chart-page/chart-symbol-help.tsx @@ -1,13 +1,21 @@ "use client"; -import { useState, type ReactNode } from "react"; +import { useEffect, useRef, useState, type ReactNode } from "react"; -type Explain = (text: string | null) => void; +/** `anchor` is the mark the bubble points at; without one the last anchor is kept. */ +export type Explain = (text: string | null, anchor?: Element | null) => void; type Props = { resetKey: string; children: ReactNode | ((explain: Explain) => ReactNode); }; +/** How long a tapped bubble stays up on touch screens, which have no pointer-leave to close it. */ +export const TOUCH_BUBBLE_MS = 3000; +/** Room kept between the bubble and the stage edge; the bubble never runs off it. */ +const EDGE = 8; +/** Half the bubble's max width (see `.chart-symbol-bubble`), for clamping the centre. */ +const HALF_WIDTH = 110; + /** The drawing only supplies facts. All transient help stays on the chart page. */ export function ChartSymbolHelp({ resetKey, children }: Props) { return {children}; @@ -22,26 +30,94 @@ function helpTarget(target: EventTarget | null): Element | null { return null; } +type Bubble = { text: string; x: number; y: number; below: boolean }; + +/** + * Where the bubble goes, in the stage's own coordinates: centred over the mark, + * above it unless that would leave the stage, and pulled in from the sides so + * the text never runs off the chart (2026-09-29, product: a bubble at the mark, + * not a line of text under the chart). + */ +export function placeBubble( + mark: Pick, + stage: Pick, +): Omit { + const centre = mark.left - stage.left + mark.width / 2; + const x = Math.min(Math.max(centre, HALF_WIDTH + EDGE), Math.max(stage.width - HALF_WIDTH - EDGE, HALF_WIDTH + EDGE)); + const top = mark.top - stage.top; + const below = top < 48; + return { x, y: below ? top + mark.height : top, below }; +} + function SymbolHelpSession({ children }: Pick) { - const [help, setHelp] = useState(null); + const stage = useRef(null); + const [bubble, setBubble] = useState(null); + const touchTimer = useRef(null); + + function show(text: string | null, anchor: Element | null | undefined) { + if (!text) { + setBubble(null); + return; + } + // Found from the mark rather than a ref: `explain` is handed to the drawing during render. + const box = anchor?.closest(".chart-page-symbol-help")?.getBoundingClientRect(); + const mark = anchor?.getBoundingClientRect(); + if (!box || !mark) { + // No geometry for this mark: keep the last position, or the stage corner. Never drop the text. + setBubble((current) => ({ x: HALF_WIDTH + EDGE, y: 0, below: true, ...current, text })); + return; + } + setBubble({ text, ...placeBubble(mark, box) }); + } const explainTarget = (target: EventTarget | null) => { - setHelp(helpTarget(target)?.getAttribute("data-chart-help") ?? null); + const element = helpTarget(target); + show(element?.getAttribute("data-chart-help") ?? null, element); }; + const explain: Explain = (text, anchor) => show(text, anchor); + + function clearTouchTimer() { + if (touchTimer.current !== null) window.clearTimeout(touchTimer.current); + touchTimer.current = null; + } + + // A tap anywhere outside the chart closes a tapped bubble. + useEffect(() => { + if (!bubble) return; + const close = (event: PointerEvent) => { + if (stage.current && event.target instanceof Node && !stage.current.contains(event.target)) setBubble(null); + }; + document.addEventListener("pointerdown", close); + return () => document.removeEventListener("pointerdown", close); + }, [bubble]); + useEffect(() => clearTouchTimer, []); + return (
explainTarget(event.target)} - onPointerMove={(event) => explainTarget(event.target)} + onPointerOver={(event) => { + if (event.pointerType !== "touch") explainTarget(event.target); + }} onPointerOut={(event) => { - if (helpTarget(event.target) !== helpTarget(event.relatedTarget)) setHelp(null); + // Touch fires pointer-out right after the tap; the bubble must survive it. + if (event.pointerType === "touch") return; + if (helpTarget(event.target) !== helpTarget(event.relatedTarget)) setBubble(null); + }} + onPointerLeave={(event) => { + if (event.pointerType !== "touch") setBubble(null); }} - onPointerLeave={() => setHelp(null)} onFocus={(event) => explainTarget(event.target)} - onBlur={() => setHelp(null)} + onBlur={() => setBubble(null)} onClick={(event) => explainTarget(event.target)} + onPointerUp={(event) => { + if (event.pointerType !== "touch") return; + explainTarget(event.target); + clearTouchTimer(); + touchTimer.current = window.setTimeout(() => setBubble(null), TOUCH_BUBBLE_MS); + }} onKeyDown={(event) => { if (event.key === "Escape") { - setHelp(null); + setBubble(null); event.stopPropagation(); } else if (event.key === "Enter" || event.key === " ") { const target = helpTarget(event.target); @@ -52,10 +128,18 @@ function SymbolHelpSession({ children }: Pick) { } }} > - {typeof children === "function" ? children(setHelp) : children} -

- {help ?? "停在或轻点盘内标记可查看说明。"} -

+ {typeof children === "function" ? children(explain) : children} + {bubble ? ( +
+ {bubble.text} +
+ ) : null} + {/* Screen readers still hear the same sentence the bubble shows. */} +

{bubble?.text ?? ""}

); } diff --git a/frontend/src/components/chart-page/western-wheel-svg.tsx b/frontend/src/components/chart-page/western-wheel-svg.tsx index 7fda4a65..228a1b6d 100644 --- a/frontend/src/components/chart-page/western-wheel-svg.tsx +++ b/frontend/src/components/chart-page/western-wheel-svg.tsx @@ -85,7 +85,7 @@ export function WesternWheelSvg({ skeleton?: boolean; selectedLabel?: string | null; onSelectPlanet?: (id: string) => void; - onExplain?: (text: string | null) => void; + onExplain?: (text: string | null, anchor?: Element | null) => void; }) { const western = skeleton ? EMPTY_WESTERN_WHEEL : suppliedWestern; const asc = western.ascendantLongitude; @@ -134,16 +134,22 @@ export function WesternWheelSvg({ function explainNearest(event: PointerEvent, fallbackId: string) { if (!onExplain) return; event.stopPropagation(); - onExplain(planetDescription(nearestId(event, fallbackId))); + const id = nearestId(event, fallbackId); + onExplain(planetDescription(id), planetAnchor(event.currentTarget, id)); } function selectNearest(event: MouseEvent, fallbackId: string) { const id = nearestId(event, fallbackId); onSelectPlanet?.(id); if (onExplain) { event.stopPropagation(); - onExplain(planetDescription(id)); + onExplain(planetDescription(id), planetAnchor(event.currentTarget, id)); } } + /** The bubble points at the planet that was resolved, not merely the one under the pointer. */ + function planetAnchor(from: EventTarget, id: string): Element | null { + if (!(from instanceof Element)) return null; + return from.closest("svg")?.querySelector(`[data-planet-id="${CSS.escape(id)}"]`) ?? from; + } function helpProps(text: string) { return onExplain ? { className: "chart-page-symbol-target", role: "button", tabIndex: 0, @@ -236,6 +242,7 @@ export function WesternWheelSvg({ key={planet.id} className={selected ? "chart-page-western-planet is-selected" : "chart-page-western-planet"} data-tier={placement.tier} + data-planet-id={planet.id} role="button" tabIndex={0} aria-pressed={selected} @@ -246,14 +253,14 @@ export function WesternWheelSvg({ onFocus={(event) => { if (!onExplain) return; event.stopPropagation(); - onExplain(planetDescription(planet.id)); + onExplain(planetDescription(planet.id), event.currentTarget); }} onClick={(event) => selectNearest(event, planet.id)} onKeyDown={(event) => { if (event.key !== "Enter" && event.key !== " ") return; event.preventDefault(); onSelectPlanet?.(planet.id); - onExplain?.(planetDescription(planet.id)); + onExplain?.(planetDescription(planet.id), event.currentTarget); }} >
diff --git a/frontend/src/hooks/use-birth-sky-cover.ts b/frontend/src/hooks/use-birth-sky-cover.ts index 8307fc2f..ca434de4 100644 --- a/frontend/src/hooks/use-birth-sky-cover.ts +++ b/frontend/src/hooks/use-birth-sky-cover.ts @@ -8,13 +8,17 @@ import { loadBirthSkyCover, releaseBirthSkyCover, type BirthSkyCover } from "@/l * Chart page prefetch for 「那一刻的天空」 (TASK-birth-sky-cover-20260928 T3). * * Starts as soon as the chart is `ok`, keyed by subject + profile fingerprint so - * switching person (or editing birth data) fetches again. Returns the cover - * only once the PNG is painted; until then, and on any failure, null — the - * header shows no button, no placeholder, no error. + * switching person (or editing birth data) fetches again. `cover` is set once + * the PNG is painted. `pending` is true while it is still being painted, so the + * header can show the button at once instead of popping it in a second later + * (2026-09-29); a failure clears both and the button goes away without an error. */ -export function useBirthSkyCover(subjectId: string | null, fingerprint: string | null): BirthSkyCover | null { +export type BirthSkyCoverState = Readonly<{ cover: BirthSkyCover | null; pending: boolean }>; + +export function useBirthSkyCover(subjectId: string | null, fingerprint: string | null): BirthSkyCoverState { const key = subjectId ? `${subjectId}:${fingerprint ?? ""}` : null; const [cover, setCover] = useState(null); + const [settledKey, setSettledKey] = useState(null); useEffect(() => { if (!key || !subjectId) return; @@ -27,6 +31,7 @@ export function useBirthSkyCover(subjectId: string | null, fingerprint: string | } loaded = next; if (next) setCover(next); + setSettledKey(key); }); return () => { controller.abort(); @@ -34,5 +39,6 @@ export function useBirthSkyCover(subjectId: string | null, fingerprint: string | }; }, [key, subjectId]); - return cover && cover.key === key ? cover : null; + const current = cover && cover.key === key ? cover : null; + return { cover: current, pending: key !== null && current === null && settledKey !== key }; } diff --git a/frontend/tests/birth-sky-replay-20260929.test.ts b/frontend/tests/birth-sky-replay-20260929.test.ts index 3b14ff66..0c643f8e 100644 --- a/frontend/tests/birth-sky-replay-20260929.test.ts +++ b/frontend/tests/birth-sky-replay-20260929.test.ts @@ -117,7 +117,11 @@ test("「分享」 hands out the painted PNG; every open is a fresh replay from assert.match(replay, /export const BIRTH_SKY_SHARE_FAILED = "没能分享，再试一次。";/); assert.match(replay, /await saveBirthSkyImage\(cover\.blob\)/); assert.match(entry, /dynamic\(\s*\(\) => import\("\.\/birth-sky-replay"\)/); - assert.match(entry, /\{open \? setOpen\(false\)\} \/> : null\}/); + // 原值：`{open ? setOpen(false)} /> : null}` + // 新值：`{open ? setWanted(false)} /> : null}`，其中 open = 点过且封面已画好 + // 原因：BUG-1102——按钮在星盘就绪时立即出现，封面还在画时点击被记下、画好即开；每次打开仍重放的断言不变 + assert.match(entry, /\{open \? setWanted\(false\)\} \/> : null\}/); + assert.match(entry, /const open = wanted && cover !== null;/); assert.match(voice, /没能分享，再试一次。/); assert.match(design, /定格/); }); diff --git a/frontend/tests/chart-page-mobile-width-20260929.test.ts b/frontend/tests/chart-page-mobile-width-20260929.test.ts index 984c9857..24b4742b 100644 --- a/frontend/tests/chart-page-mobile-width-20260929.test.ts +++ b/frontend/tests/chart-page-mobile-width-20260929.test.ts @@ -26,10 +26,14 @@ test("chart drawing limits are desktop-only and exclude the padded Vedic stage", const desktopEnd = globalStyles.indexOf("\n}", desktopStart); const desktop = globalStyles.slice(desktopStart, desktopEnd + 2); const outsideDesktop = globalStyles.slice(0, desktopStart) + globalStyles.slice(desktopEnd + 2); - assert.match(cssDeclarations(".chart-page-vedic-plot", desktop), /max-width:\s*440px/); + // 原值：桌面 `.chart-page-vedic-plot { max-width: 440px }`，且 `.chart-page-vedic-stage` 任何地方都不得有 max-width + // 新值：桌面上限移到外框 `.chart-page-vedic-stage`（440px + 两侧内边距 + 边框），绘图区在框内撑满；手机端外框仍不设上限 + // 原因：产品 2026-09-29「星图外面的框太丑」——只限绘图区时外框比星图宽一大截，左右留白（BUG-1100）。骨架与结果同在外框内，揭幕不跳尺寸 + assert.match(cssDeclarations(".chart-page-vedic-stage", desktop), /max-width:\s*calc\(440px \+ 2 \* var\(--space-3\) \+ 2px\)/); + assert.doesNotMatch(desktop, /\.chart-page-vedic-plot \{[^}]*max-width/); assert.match(cssDeclarations(".chart-page-western-wheel", desktop), /max-width:\s*480px/); assert.doesNotMatch(cssDeclarations(".chart-page-vedic-plot", outsideDesktop), /max-width/); - assert.doesNotMatch(cssDeclarations(".chart-page-vedic-stage", globalStyles), /max-width/); + assert.doesNotMatch(cssDeclarations(".chart-page-vedic-stage", outsideDesktop), /max-width/); assert.match(cssDeclarations(".chart-page-western-wheel", outsideDesktop), /max-width:\s*520px/); assert.match(cssDeclarations(".chart-page-waiting-plot", globalStyles), /width:\s*100%/); const skeleton = readFileSync(new URL("../src/components/chart-page/chart-page-skeleton.tsx", import.meta.url), "utf8"); diff --git a/frontend/tests/react-client-lifecycle-test-support.ts b/frontend/tests/react-client-lifecycle-test-support.ts index 110348e3..5237c9c7 100644 --- a/frontend/tests/react-client-lifecycle-test-support.ts +++ b/frontend/tests/react-client-lifecycle-test-support.ts @@ -24,6 +24,8 @@ class HostElement { clientHeight = 0; readonly scrollCalls: { top?: number }[] = []; scrollTo(options: { top?: number }) { this.scrollCalls.push(options); } + /** No layout here: every box is the origin. Components that position from rects still run. */ + getBoundingClientRect() { return { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0 }; } /** Class selectors only (`.a` / `.a.b`); enough for components that find their scroller. */ closest(selector: string): HostElement | null { const wanted = selector.split(".").filter(Boolean); diff --git a/frontend/tests/surface-feedback-20260929.test.tsx b/frontend/tests/surface-feedback-20260929.test.tsx new file mode 100644 index 00000000..ffcdb9c8 --- /dev/null +++ b/frontend/tests/surface-feedback-20260929.test.tsx @@ -0,0 +1,100 @@ +import assert from "node:assert/strict"; +import { readFileSync } from "node:fs"; +import test from "node:test"; +import React from "react"; + +import { BirthSkyEntry } from "../src/components/birth-sky/birth-sky-entry"; +import { ChartSymbolHelp, TOUCH_BUBBLE_MS, placeBubble } from "../src/components/chart-page/chart-symbol-help"; +import { VedicChartSvg } from "../src/components/personal-report/vedic-chart-svg"; +import { assembleChartView } from "../src/lib/chart-view-load"; +import type { ChartViewOk } from "../src/lib/chart-view-contract"; +import { goldenSky } from "./birth-sky-test-support"; +import { createClientLifecycleHarness } from "./react-client-lifecycle-test-support"; + +// Product feedback 2026-09-29 evening (BUG-1100..1103). +Object.assign(globalThis, { React }); +const read = (path: string) => readFileSync(new URL(path, import.meta.url), "utf8"); +const golden = JSON.parse(read("./fixtures/chart-view-golden.json")); + +async function d1() { + const result = await assembleChartView({ + userId: "synthetic", accountId: "synthetic", profileFingerprint: "fixture-v1", + profile: { name: "Synthetic", date: "1990-06-15", time: "12:00", placeLabel: "Synthetic", latitude: 39.9042, longitude: 116.4074, timezoneOffset: 8, timezoneId: "Asia/Shanghai", ayanamsa: "raman", birthTimeStatus: "confirmed" }, + asOf: "2026-09-15", layers: ["varga"], + postEngine: async (path) => ({ status: "ok", payload: path === "/api/chart" ? golden.chart : golden.varga_full }), + }); + return (result.body as ChartViewOk).vedic.vargas.find((varga) => varga.id === "D1")!.chart; +} + +test("the bubble sits over the mark, flips below near the top and never leaves the stage (BUG-1101)", () => { + const stage = { left: 100, top: 50, width: 440 }; + const middle = placeBubble({ left: 300, top: 250, width: 20, height: 20 }, stage); + assert.deepEqual(middle, { x: 210, y: 200, below: false }); + const top = placeBubble({ left: 300, top: 60, width: 20, height: 20 }, stage); + assert.equal(top.below, true); + assert.equal(top.y, 30, "below the mark: its bottom edge"); + assert.equal(placeBubble({ left: 102, top: 250, width: 10, height: 10 }, stage).x, 118, "clamped from the left edge"); + assert.equal(placeBubble({ left: 530, top: 250, width: 10, height: 10 }, stage).x, 322, "clamped from the right edge"); +}); + +test("hover shows a bubble at the mark; a tap keeps it past pointer-out and closes after 3s; no hint line (BUG-1101)", async () => { + const chart = await d1(); + const h = createClientLifecycleHarness(); + try { + await h.render(); + const stage = h.elements().find((node) => node.getAttribute("class") === "chart-page-symbol-help")!; + const bubble = () => h.elements().find((node) => node.getAttribute("role") === "tooltip"); + const asc = h.elements().find((node) => node.getAttribute("data-chart-help") === "As · 上升")!; + assert.equal(bubble()?.text, undefined); + assert.ok(!h.container.text.includes("停在或轻点"), "the hint line is gone"); + await h.event(stage, "onPointerOver", { target: asc, pointerType: "mouse" }); + assert.equal(bubble()?.text, "As · 上升"); + await h.event(stage, "onPointerOut", { target: asc, relatedTarget: null, pointerType: "mouse" }); + assert.equal(bubble()?.text, undefined); + // Touch: pointer-over is ignored, the tap (pointer-up) opens, pointer-out and leave do not close. + await h.event(stage, "onPointerOver", { target: asc, pointerType: "touch" }); + assert.equal(bubble()?.text, undefined); + await h.event(stage, "onPointerUp", { target: asc, pointerType: "touch" }); + assert.equal(bubble()?.text, "As · 上升"); + await h.event(stage, "onPointerOut", { target: asc, relatedTarget: null, pointerType: "touch" }); + await h.event(stage, "onPointerLeave", { pointerType: "touch" }); + assert.equal(bubble()?.text, "As · 上升"); + await new Promise((resolve) => setTimeout(resolve, TOUCH_BUBBLE_MS + 50)); + await h.idle(); + assert.equal(bubble()?.text, undefined, "closes by itself"); + assert.deepEqual(h.errors, []); + } finally { await h.close(); } +}); + +test("the chart card hugs the drawing on desktop (BUG-1100)", () => { + const css = read("../src/app/globals.css"); + assert.match(css, /\.chart-page-vedic-stage \{ width: 100%; max-width: calc\(440px \+ 2 \* var\(--space-3\) \+ 2px\); \}/); + assert.doesNotMatch(read("../src/components/chart-page/chart-symbol-help.tsx"), /停在或轻点盘内标记可查看说明/); +}); + +test("the sky button shows while the cover paints and opens the moment it lands (BUG-1102)", async () => { + const h = createClientLifecycleHarness(); + try { + await h.render(); + const button = h.elements().find((node) => node.tagName === "BUTTON")!; + assert.match(button.text, /那一刻的天空/); + await h.event(button); + // Remembered, nothing opened yet and nothing spinning. + assert.ok(!h.container.text.includes("正在加载")); + const cover = { key: "self:fp", sky: goldenSky("day"), blob: new Blob([], { type: "image/png" }), url: "blob:birth-sky", serif: false }; + await h.render(); + await h.idle(); + assert.deepEqual(h.errors, []); + } finally { await h.close(); } + const view = read("../src/components/chart-page/chart-page-view.tsx"); + assert.match(view, /\(birthSky \|\| birthSkyPending\) \? /); + const hook = read("../src/hooks/use-birth-sky-cover.ts"); + assert.match(hook, /pending: key !== null && current === null && settledKey !== key/); +}); + +test("report centre card: spaced from the header, title says what, button says do (BUG-1103)", () => { + const centre = read("../src/components/personal-report/personal-report-center.tsx"); + assert.match(centre, /

完整本命报告<\/h2>/); + assert.doesNotMatch(centre, /]*>生成个人报告/); + assert.match(read("../src/app/globals.css"), /\.report-center-create \{\n width: min\(900px, 100%\);\n(?: \/\*[^\n]*\*\/\n)? margin: var\(--space-6\) auto var\(--space-8\);/); +});