diff --git a/src/components/Export/ExportDefaultsSettingsForm.scss b/src/components/Export/ExportDefaultsSettingsForm.scss index ccfa2bd..f570820 100644 --- a/src/components/Export/ExportDefaultsSettingsForm.scss +++ b/src/components/Export/ExportDefaultsSettingsForm.scss @@ -359,8 +359,19 @@ margin-bottom: 0; } + .format-setting-group { + grid-template-columns: 1fr; + gap: 10px; + align-items: stretch; + } + + .format-setting-group .form-control { + justify-content: flex-start; + } + .format-grid { - max-width: 360px; + max-width: none; + grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; } } @@ -384,5 +395,9 @@ .format-grid { max-width: none; } + + .format-grid { + grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); + } } } diff --git a/src/components/Export/ExportDefaultsSettingsForm.tsx b/src/components/Export/ExportDefaultsSettingsForm.tsx index 681a3ee..974aa19 100644 --- a/src/components/Export/ExportDefaultsSettingsForm.tsx +++ b/src/components/Export/ExportDefaultsSettingsForm.tsx @@ -145,7 +145,7 @@ export function ExportDefaultsSettingsForm({ -
+
导出页面默认选中的格式 diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss index 81fd177..a7d9683 100644 --- a/src/pages/ExportPage.scss +++ b/src/pages/ExportPage.scss @@ -2858,6 +2858,66 @@ } } +.dialog-format-select { + position: relative; + min-width: 220px; +} + +.dialog-format-dropdown { + position: absolute; + top: calc(100% + 6px); + right: 0; + width: min(360px, calc(100vw - 64px)); + background: color-mix(in srgb, var(--bg-primary) 85%, var(--bg-secondary)); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 6px; + box-shadow: var(--shadow-md); + z-index: 120; + max-height: 320px; + overflow-y: auto; + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); +} + +.dialog-format-option { + width: 100%; + text-align: left; + display: flex; + flex-direction: column; + gap: 4px; + padding: 10px 12px; + border: none; + border-radius: 10px; + background: transparent; + cursor: pointer; + transition: all 0.15s; + color: var(--text-primary); + font-size: 14px; + + &:hover { + background: var(--bg-tertiary); + } + + &.active { + background: color-mix(in srgb, var(--primary) 12%, transparent); + color: var(--primary); + } + + .option-label { + font-weight: 500; + } + + .option-desc { + font-size: 12px; + color: var(--text-tertiary); + } + + &.active .option-desc { + color: var(--primary); + } +} + .scope-tag-row { display: flex; align-items: center; diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx index b329a0e..5d243a8 100644 --- a/src/pages/ExportPage.tsx +++ b/src/pages/ExportPage.tsx @@ -1320,6 +1320,7 @@ function ExportPage() { sessionNames: [], title: '' }) + const [showSessionFormatSelect, setShowSessionFormatSelect] = useState(false) const [tasks, setTasks] = useState([]) const [lastExportBySession, setLastExportBySession] = useState>({}) @@ -1354,6 +1355,7 @@ function ExportPage() { const contactsAvatarCacheRef = useRef>({}) const contactsVirtuosoRef = useRef(null) const sessionTableSectionRef = useRef(null) + const sessionFormatDropdownRef = useRef(null) const detailRequestSeqRef = useRef(0) const sessionsRef = useRef([]) const sessionContentMetricsRef = useRef>({}) @@ -4801,6 +4803,24 @@ function ExportPage() { return () => window.removeEventListener('keydown', handleKeyDown) }, [closeSessionSnsTimeline, sessionSnsTimelineTarget]) + useEffect(() => { + if (!showSessionFormatSelect) return + const handlePointerDown = (event: MouseEvent) => { + const target = event.target as Node + if (sessionFormatDropdownRef.current && !sessionFormatDropdownRef.current.contains(target)) { + setShowSessionFormatSelect(false) + } + } + document.addEventListener('mousedown', handlePointerDown) + return () => document.removeEventListener('mousedown', handlePointerDown) + }, [showSessionFormatSelect]) + + useEffect(() => { + if (!exportDialog.open) { + setShowSessionFormatSelect(false) + } + }, [exportDialog.open]) + const handleCopyDetailField = useCallback(async (text: string, field: string) => { try { await navigator.clipboard.writeText(text) @@ -4894,14 +4914,19 @@ function ExportPage() { const formatCandidateOptions = exportDialog.scope === 'sns' ? snsFormatOptions : formatOptions + const isSessionScopeDialog = exportDialog.scope === 'single' || exportDialog.scope === 'multi' const isContentScopeDialog = exportDialog.scope === 'content' const isContentTextDialog = isContentScopeDialog && exportDialog.contentType === 'text' + const useCollapsedSessionFormatSelector = isSessionScopeDialog const shouldShowFormatSection = !isContentScopeDialog || isContentTextDialog const shouldShowMediaSection = !isContentScopeDialog const avatarExportStatusLabel = options.exportAvatars ? '已开启聊天消息导出带头像' : '已关闭聊天消息导出带头像' const textContentFormatNote = options.exportAvatars ? '此模式包含用户头像,不导出图片语音视频表情包等多媒体内容' : '此模式不包含用户头像,不导出图片语音视频表情包等多媒体内容' + const activeDialogFormatLabel = exportDialog.scope === 'sns' + ? (snsFormatOptions.find(option => option.value === snsExportFormat)?.label ?? snsExportFormat) + : (formatOptions.find(option => option.value === options.format)?.label ?? options.format) const shouldShowDisplayNameSection = !( exportDialog.scope === 'sns' || ( @@ -6057,33 +6082,69 @@ function ExportPage() { {shouldShowFormatSection && (
-

{exportDialog.scope === 'sns' ? '朋友圈导出格式选择' : '对话文本导出格式选择'}

+ {useCollapsedSessionFormatSelector ? ( +
+

对话文本导出格式选择

+
+ + {showSessionFormatSelect && ( +
+ {formatOptions.map(option => ( + + ))} +
+ )} +
+
+ ) : ( +

{exportDialog.scope === 'sns' ? '朋友圈导出格式选择' : '对话文本导出格式选择'}

+ )} {!isContentScopeDialog && exportDialog.scope !== 'sns' && (
{avatarExportStatusLabel}
)} {isContentTextDialog && (
{textContentFormatNote}
)} -
- {formatCandidateOptions.map(option => ( - - ))} -
+ {!useCollapsedSessionFormatSelector && ( +
+ {formatCandidateOptions.map(option => ( + + ))} +
+ )}
)}