feat(reports): redesign the export sheet — edition, whole or chosen chapters, size on the button
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01N4f2nya58RoRu4yEmJgRGE
This commit is contained in:
Jesse_Chen
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
94fbf37674
commit
7950ae93d3
@@ -3994,57 +3994,50 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
|
||||
@media (min-width: 860px) {
|
||||
.report-export-drawer {
|
||||
inset: 0;
|
||||
width: min(720px, 92vw);
|
||||
width: min(520px, 92vw);
|
||||
max-height: 80vh;
|
||||
margin: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.report-export-panel { max-height: calc(80vh - 2px); }
|
||||
}
|
||||
.report-export-header, .report-export-footer { padding: var(--space-4); flex-shrink: 0; }
|
||||
.report-export-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
|
||||
.report-export-heading h2 { margin: 0; font-size: var(--type-title-lg); }
|
||||
.report-export-header p { margin: var(--space-2) 0; font-size: var(--type-body-sm); color: var(--color-ink-secondary); }
|
||||
.report-export-count { font-variant-numeric: tabular-nums; }
|
||||
/* 「问 AI 建议导出英文版」: one quiet band inside the header, with the switch beside it. */
|
||||
.report-export-ai-hint { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas-muted); }
|
||||
.report-export-ai-hint p { margin: 0 !important; color: var(--color-ink) !important; }
|
||||
.report-export-ai-hint > button { flex-shrink: 0; }
|
||||
.report-export-edition-note { color: var(--color-ink-tertiary) !important; font-size: var(--type-caption) !important; }
|
||||
@media (max-width: 767px) { .report-export-ai-hint { flex-direction: column; align-items: stretch; } }
|
||||
.report-export-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
|
||||
/* Selected preset: neutral raised fill + full ink + a visible edge. The old
|
||||
--color-action-soft fill reads as a dark red-brown block in the dark theme
|
||||
(#3a2620) — BUG-1078. */
|
||||
.report-export-presets [aria-pressed="true"] { background: var(--color-canvas-muted); color: var(--color-ink); border-color: var(--color-ink-secondary); }
|
||||
.report-export-list { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 var(--space-4) var(--space-4); }
|
||||
.report-export-list h3 { font-size: var(--type-title-sm); margin: var(--space-3) 0 var(--space-2); }
|
||||
.report-export-grid { display: grid; gap: var(--space-2); }
|
||||
.report-export-block { display: flex; align-items: center; text-align: left; gap: var(--space-3); min-height: 44px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-ink); font-size: var(--type-body-sm); overflow-wrap: anywhere; }
|
||||
.report-export-block[aria-checked="true"] { background: var(--color-selected); border-color: var(--color-action); }
|
||||
.report-export-block small { display: block; color: var(--color-ink-tertiary); font-size: var(--type-caption); }
|
||||
.report-export-check { flex-shrink: 0; width: 18px; height: 18px; border: 1px solid var(--color-border-strong); border-radius: 4px; text-align: center; line-height: 16px; }
|
||||
.report-export-block:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
|
||||
/* 导出报告 sheet (redesigned 2026-09-30): title row; the edition as a two-way
|
||||
segment with one caption; two radio cards, 整篇报告 / 自选章节; the checklist
|
||||
only in 自选; the size on the button. No bordered block cards, no presets. */
|
||||
.report-export-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-1) var(--space-5); flex-shrink: 0; }
|
||||
.report-export-header h2 { margin: 0; font-size: var(--type-title-md); font-weight: 600; }
|
||||
.report-export-body { display: grid; gap: var(--space-4); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-5) var(--space-4); }
|
||||
.report-export-field { display: grid; gap: var(--space-2); }
|
||||
.report-export-segment { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--radius-md); background: var(--color-canvas-muted); }
|
||||
.report-export-segment button { border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--color-ink-secondary); font: inherit; font-size: var(--type-body-sm); cursor: pointer; }
|
||||
.report-export-segment button[aria-checked="true"] { background: var(--color-canvas); color: var(--color-ink); font-weight: 600; box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 12%, transparent); }
|
||||
.report-export-caption { margin: 0; color: var(--color-ink-tertiary); font-size: var(--type-caption); line-height: 1.5; }
|
||||
.report-export-modes { display: grid; gap: var(--space-2); }
|
||||
.report-export-mode { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-ink); font: inherit; text-align: left; cursor: pointer; }
|
||||
.report-export-mode[aria-checked="true"] { border-color: var(--color-ink-secondary); background: var(--color-canvas-muted); }
|
||||
.report-export-mode strong { display: block; font-size: var(--type-body-md); font-weight: 600; }
|
||||
.report-export-mode small { display: block; margin-top: 2px; color: var(--color-ink-tertiary); font-size: var(--type-caption); }
|
||||
.report-export-radio { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid var(--color-border-strong); border-radius: 50%; }
|
||||
.report-export-mode[aria-checked="true"] .report-export-radio { border: 5px solid var(--color-ink); }
|
||||
.report-export-list { display: grid; gap: var(--space-1); }
|
||||
.report-export-group + .report-export-group { border-top: 1px solid var(--color-border); padding-top: var(--space-1); }
|
||||
.report-export-group-head { display: flex; align-items: center; }
|
||||
.report-export-row { display: flex; flex: 1; align-items: center; gap: var(--space-3); width: 100%; padding: 0 var(--space-1); border: 0; background: transparent; color: var(--color-ink); font: inherit; font-size: var(--type-body-sm); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
|
||||
.report-export-row:not(.is-group) { padding-left: calc(var(--space-1) + 18px + var(--space-3)); }
|
||||
.report-export-row:not(.is-group) .report-export-box { margin-left: calc(-18px - var(--space-3)); }
|
||||
.report-export-row.is-group { font-weight: 600; }
|
||||
.report-export-row small { margin-left: var(--space-2); color: var(--color-ink-tertiary); font-size: var(--type-caption); font-weight: 400; font-variant-numeric: tabular-nums; }
|
||||
.report-export-box { flex-shrink: 0; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--color-border-strong); border-radius: 4px; color: var(--color-canvas); }
|
||||
.report-export-box svg { width: 13px; height: 13px; stroke-width: 3; }
|
||||
.report-export-row:is([aria-checked="true"], [aria-checked="mixed"]) .report-export-box { border-color: var(--color-ink); background: var(--color-ink); }
|
||||
.report-export-expand { flex-shrink: 0; border: 0; background: transparent; color: var(--color-ink-secondary); cursor: pointer; }
|
||||
.report-export-expand svg { width: 18px; height: 18px; transition: transform 140ms ease-out; }
|
||||
.report-export-expand[aria-expanded="true"] svg { transform: rotate(90deg); }
|
||||
.report-export-drawer button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
|
||||
.report-export-drawer button { min-height: 44px; min-width: 44px; }
|
||||
.report-export-footer { border-top: 1px solid var(--color-border); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
|
||||
.report-export-footer { flex-shrink: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
|
||||
.report-export-footer > button { width: 100%; }
|
||||
.report-export-footer p { margin: 0 0 var(--space-2); color: var(--color-danger); font-size: var(--type-body-sm); }
|
||||
@media (min-width: 860px) { .report-export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
/* Phones (2026-09-30): the header had grown to half the sheet — title, a two-line
|
||||
description, a two-line count, wrapped presets — and the block list was
|
||||
pushed out of sight. The description goes (the title and presets say it),
|
||||
the count is one short line, presets scroll sideways in one row, and the
|
||||
sheet may use more of the screen. */
|
||||
@media (max-width: 767px) {
|
||||
#report-export-description { display: none; }
|
||||
.report-export-header { padding: var(--space-3) var(--space-4) var(--space-2); }
|
||||
.report-export-header p { margin: var(--space-1) 0; }
|
||||
.report-export-count { font-size: var(--type-caption); }
|
||||
.report-export-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
|
||||
.report-export-presets [data-slot="button"] { flex: 0 0 auto; height: 40px; padding: 0 var(--space-3); }
|
||||
.report-export-ai-hint { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
|
||||
.report-export-ai-hint p { font-size: var(--type-caption); }
|
||||
}
|
||||
@media print { .report-export-drawer { display: none !important; } }
|
||||
|
||||
/* ============================================================
|
||||
@@ -5208,7 +5201,7 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
|
||||
@media (min-width: 860px) {
|
||||
.chart-page-type-sheet {
|
||||
inset: 0;
|
||||
width: min(720px, 92vw);
|
||||
width: min(520px, 92vw);
|
||||
max-height: 80vh;
|
||||
margin: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
|
||||
Reference in New Issue
Block a user