feat(reports): generate card, jump to end, labelled export, TOC levels, table bands, export size; drop 字段 jargon (BUG-1092..1094)

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N4f2nya58RoRu4yEmJgRGE

frontend/src/components/personal-report/generate-personal-report-button.tsx

@@ -200,14 +200,12 @@ export function GeneratePersonalReportButton({
   }
 
   return (
-    /* Sized for the 46px page header it now lives in. It used to be the
-       default filled Button at full height, which read as a banner CTA
-       floating in the top-right corner rather than the header's own action. */
+    /* The report centre's one filled action, centred in its own card at the
+       top of the page (2026-09-29). It used to be a small outline button in
+       the 46px header, easy to miss beside the page name. */
     <Button
       type="button"
-      variant="outline"
-      size="sm"
-      className="shrink-0 whitespace-nowrap"
+      className="whitespace-nowrap"
       onClick={() => void handleGenerate()}
       disabled={submitting}
       title="根据已保存的具体出生分钟生成完整报告；未校正会标明方向性参考"

frontend/src/components/personal-report/personal-report-center.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { AppLink } from "@/components/app-link";
-import { Clock3, FileText, RefreshCw } from "lucide-react";
+import { FileText, RefreshCw } from "lucide-react";
 import { InlineSpinner } from "@/components/inline-spinner";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -151,14 +151,19 @@ export function PersonalReportCenter() {
   }
 
   return (
-    <SecondaryPageShell
-      title="我的报告"
-      actions={<GeneratePersonalReportButton onCreated={() => void load()} />}
-    >
+    <SecondaryPageShell title="我的报告">
       <div className="report-center-body">
+      {/* Generating is the page's first thing, in its own card, and the only
+          entry: the header no longer carries a second button (2026-09-29). */}
+      <section className="report-center-create" aria-labelledby="report-center-create-title">
+        <FileText aria-hidden="true" className="size-7" />
+        <h2 id="report-center-create-title">生成个人报告</h2>
+        <p>创建后即可离开，完成时下方列表会自动更新。</p>
+        <GeneratePersonalReportButton onCreated={() => void load()} />
+      </section>
       <section className="report-center-section">
         <div className="report-center-section-heading">
-          <h2>报告记录</h2>
+          <h2>过往的报告</h2>
           <button type="button" onClick={() => void load(true)} aria-label="刷新报告列表">
             {state.phase === "loading" ? <InlineSpinner size={14} /> : <RefreshCw aria-hidden="true" />}刷新
           </button>
@@ -169,11 +174,7 @@ export function PersonalReportCenter() {
         )}
 
         {state.reports.length === 0 ? (
-          <div className="report-center-empty">
-            <Clock3 aria-hidden="true" className="size-7" />
-            <h3>还没有个人报告</h3>
-            <p>点击“生成完整报告”，创建后即可离开；完成时这里会自动更新。</p>
-          </div>
+          <p className="report-center-empty">还没有个人报告。</p>
         ) : (
           <div className="report-center-list">
             {state.reports.map((report) => {

frontend/src/components/personal-report/personal-report-markdown-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { memo, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { flushSync } from "react-dom";
 import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -12,6 +13,7 @@ import {
 } from "@/lib/report-chart-block";
 import { reportChartGrid } from "@/lib/report-chart-grid-rehype";
 import { NorthIndianChartSvg } from "@/components/personal-report/vedic-chart-svg";
+import { ReportEdgeJump } from "@/components/personal-report/report-edge-jump";
 import {
   buildLongformOutline,
   type LongformHeading,
@@ -104,11 +106,15 @@ function renderMarkdown(markdown: string, headings: readonly LongformHeading[])
 
 const LazyMarkdownSection = memo(function LazyMarkdownSection({
   section,
+  forceVisible,
 }: {
   section: LongformSection;
+  /** 「到底部」 mounts every section at once so the jump lands on the real end. */
+  forceVisible: boolean;
 }) {
   const ref = useRef<HTMLElement>(null);
-  const [visible, setVisible] = useState(section.eager);
+  const [seen, setVisible] = useState(section.eager);
+  const visible = seen || forceVisible;
   useEffect(() => {
     if (visible) return;
     if (typeof IntersectionObserver === "undefined") {
@@ -170,6 +176,10 @@ function ReportToc({ headings }: { headings: readonly LongformHeading[] }) {
 
 export function PersonalReportMarkdownView({ markdown }: { markdown: string }) {
   const outline = useMemo(() => buildLongformOutline(markdown), [markdown]);
+  const [revealed, setRevealed] = useState(false);
+  // Synchronous on purpose: the caller scrolls to scrollHeight right after, and
+  // that height is only final once every lazy section has committed.
+  const revealAll = useCallback(() => flushSync(() => setRevealed(true)), []);
   const lead = useMemo(
     () => (outline.leadMarkdown ? renderMarkdown(outline.leadMarkdown, outline.headings) : null),
     [outline],
@@ -185,9 +195,10 @@ export function PersonalReportMarkdownView({ markdown }: { markdown: string }) {
           </section>
         ) : null}
         {outline.sections.filter((section) => !section.eager).map((section) => (
-          <LazyMarkdownSection key={section.id} section={section} />
+          <LazyMarkdownSection forceVisible={revealed} key={section.id} section={section} />
         ))}
       </article>
+      <ReportEdgeJump revealAll={revealAll} />
     </div>
   );
 }

frontend/src/components/personal-report/report-actions.tsx

@@ -37,15 +37,15 @@ export function ReportActions({
           <ArrowLeft aria-hidden="true" />返回报告中心
         </Link>
         <div className="personal-report-action-end">
+          {/* Labelled, outlined and full height (2026-09-29): the icon-only ghost
+              button it replaces was the one control people could not find. */}
           <Button
             type="button"
-            size="icon"
-            variant="ghost"
+            variant="outline"
             aria-label="导出报告"
-            title="导出"
             onClick={() => setExportOpen(true)}
           >
-            <Download aria-hidden="true" />
+            <Download aria-hidden="true" />导出
           </Button>
           {exportOpen && <ReportExportDrawer blocks={blocks} reportDate={reportDate} onClose={() => setExportOpen(false)} />}
         </div>

frontend/src/components/personal-report/report-edge-jump.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
+
+/** Within this many px of the end the button flips to 「回到顶部」. */
+export const REPORT_EDGE_JUMP_NEAR_END_PX = 480;
+
+export type ReportEdgeDirection = "end" | "top";
+
+export function reportEdgeDirection(scroller: Pick<HTMLElement, "scrollTop" | "scrollHeight" | "clientHeight">): ReportEdgeDirection {
+  return scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight <= REPORT_EDGE_JUMP_NEAR_END_PX ? "top" : "end";
+}
+
+/**
+ * One floating control on the reader: 「到底部」 until the reader is near the
+ * end, then 「回到顶部」 — never both at once. Not a scroll follower: it moves
+ * only when clicked, and it owns no second scroll anchor (AGENTS §6).
+ *
+ * Sections below the fold render lazily, so the document is short until they
+ * mount. `revealAll` must synchronously mount every section before the jump,
+ * or the scroll would stop wherever the placeholders ended.
+ */
+export function ReportEdgeJump({ revealAll }: Readonly<{ revealAll: () => void }>) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [direction, setDirection] = useState<ReportEdgeDirection>("end");
+
+  useEffect(() => {
+    const scroller = ref.current?.closest<HTMLElement>(".personal-report-reader");
+    if (!scroller) return;
+    const update = () => setDirection(reportEdgeDirection(scroller));
+    scroller.addEventListener("scroll", update, { passive: true });
+    return () => scroller.removeEventListener("scroll", update);
+  }, []);
+
+  function jump() {
+    if (direction === "top") {
+      ref.current?.closest<HTMLElement>(".personal-report-reader")?.scrollTo({ top: 0 });
+      return;
+    }
+    revealAll();
+    const scroller = ref.current?.closest<HTMLElement>(".personal-report-reader");
+    scroller?.scrollTo({ top: scroller.scrollHeight });
+  }
+
+  const toEnd = direction === "end";
+  return (
+    <div ref={ref} className="report-edge-jump personal-report-screen-only">
+      <button type="button" className="report-edge-jump__button" onClick={jump}>
+        {toEnd ? <ArrowDown aria-hidden="true" /> : <ArrowUp aria-hidden="true" />}
+        {toEnd ? "到底部" : "回到顶部"}
+      </button>
+    </div>
+  );
+}

frontend/src/components/personal-report/report-export-drawer.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { detectPrintRestriction } from "@/lib/client-report-export";
 import { downloadMarkdownReport } from "@/lib/consultation-report-export";
-import { exportFilename, joinExportBlocks, presetSelection, type ReportExportBlock, type ReportExportPreset } from "@/lib/report-export-blocks";
+import { exportByteSize, exportFilename, formatExportSize, joinExportBlocks, presetSelection, type ReportExportBlock, type ReportExportPreset } from "@/lib/report-export-blocks";
 import { Button } from "@/components/ui/button";
 
 const PRESETS = { common: "常用", charts: "全部分盘", tables: "仅核对表" } as const;
@@ -23,6 +23,8 @@ export function ReportExportDrawer({ blocks, reportDate, onClose }: {
   const selected = blocks.filter(block => selection.has(block.id));
   const allSelected = selected.length === blocks.length;
   const chars = (items: readonly ReportExportBlock[]) => items.reduce((sum, block) => sum + block.chars, 0);
+  const totalSize = useMemo(() => formatExportSize(exportByteSize(blocks)), [blocks]);
+  const selectedSize = useMemo(() => formatExportSize(exportByteSize(blocks.filter(block => selection.has(block.id)))), [blocks, selection]);
 
   useEffect(() => {
     const element = dialog.current;
@@ -68,7 +70,7 @@ export function ReportExportDrawer({ blocks, reportDate, onClose }: {
       <header className="report-export-header">
         <div className="report-export-heading"><h2 id="report-export-title">分块导出</h2><Button variant="ghost" onClick={onClose} aria-label="关闭分块导出">关闭</Button></div>
         <p id="report-export-description">勾选要带走的章节，导出成一个 .md 文件。全选就是整篇。</p>
-        <p className="report-export-count" aria-live="polite">共 {blocks.length} 块 · {chars(blocks)} 字 · 已选 {selected.length}/{blocks.length} · {chars(selected)} 字</p>
+        <p className="report-export-count" aria-live="polite">共 {blocks.length} 块 · {chars(blocks)} 字 · {totalSize} · 已选 {selected.length}/{blocks.length} · {chars(selected)} 字 · {selected.length ? selectedSize : "0 KB"}</p>
         <div className="report-export-presets" aria-label="导出套餐">
           {(Object.keys(PRESETS) as ReportExportPreset[]).map(key => <Button key={key} variant="outline" aria-pressed={preset === key} onClick={() => choose(key)}>{PRESETS[key]}</Button>)}
           <Button variant="ghost" onClick={() => { setPreset(null); setSelection(allSelected ? new Set() : new Set(blocks.map(block => block.id))); }}>{allSelected ? "取消全选" : "全选"}</Button>