diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss index 978483d..18ccf3d 100644 --- a/src/pages/ExportPage.scss +++ b/src/pages/ExportPage.scss @@ -20,6 +20,73 @@ flex-shrink: 0; } +.export-section-title-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.export-section-title { + margin: 0; + font-size: 15px; + font-weight: 600; + color: var(--text-primary); +} + +.section-info-tooltip { + position: relative; + flex-shrink: 0; +} + +.section-info-trigger { + width: 24px; + height: 24px; + border-radius: 999px; + border: 1px solid var(--border-color); + background: var(--bg-secondary); + color: var(--text-tertiary); + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; + + &:hover, + &.active { + border-color: rgba(var(--primary-rgb), 0.45); + color: var(--primary); + background: rgba(var(--primary-rgb), 0.08); + } +} + +.section-info-popover { + position: absolute; + top: calc(100% + 8px); + right: 0; + width: min(340px, calc(100vw - 40px)); + border-radius: 10px; + border: 1px solid var(--border-color); + background: var(--bg-primary); + box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2); + padding: 10px 12px; + z-index: 70; + + h4 { + margin: 0; + font-size: 13px; + font-weight: 600; + color: var(--text-primary); + } + + p { + margin: 6px 0 0; + font-size: 12px; + line-height: 1.55; + color: var(--text-secondary); + } +} + .global-export-controls { background: var(--card-bg); border: 1px solid var(--border-color); @@ -2232,6 +2299,10 @@ } @media (max-width: 720px) { + .export-section-title { + font-size: 14px; + } + .table-wrap { --contacts-message-col-width: 104px; --contacts-action-col-width: 236px; diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx index 995d889..a86b1ed 100644 --- a/src/pages/ExportPage.tsx +++ b/src/pages/ExportPage.tsx @@ -7,6 +7,7 @@ import { Calendar, Check, CheckSquare, + CircleHelp, Copy, Database, Download, @@ -801,6 +802,63 @@ const WriteLayoutSelector = memo(function WriteLayoutSelector({ ) }) +const SectionInfoTooltip = memo(function SectionInfoTooltip({ + label, + heading, + messages +}: { + label: string + heading: string + messages: string[] +}) { + const [isOpen, setIsOpen] = useState(false) + const containerRef = useRef(null) + + useEffect(() => { + if (!isOpen) return + + const handleOutsideClick = (event: MouseEvent) => { + if (containerRef.current?.contains(event.target as Node)) return + setIsOpen(false) + } + + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + setIsOpen(false) + } + } + + document.addEventListener('mousedown', handleOutsideClick) + document.addEventListener('keydown', handleKeyDown) + return () => { + document.removeEventListener('mousedown', handleOutsideClick) + document.removeEventListener('keydown', handleKeyDown) + } + }, [isOpen]) + + return ( +
+ + {isOpen && ( +
+

{heading}

+ {messages.map(message => ( +

{message}

+ ))} +
+ )} +
+ ) +}) + interface TaskCenterModalProps { isOpen: boolean tasks: ExportTask[] @@ -3700,6 +3758,17 @@ function ExportPage() { onTogglePerfTask={toggleTaskPerfDetail} /> +
+

按类型批量导出

+ +
{contentCards.map(card => { const Icon = card.icon @@ -3758,6 +3827,17 @@ function ExportPage() { })}
+
+

按会话批量导出

+ +