feat(export): tailor content batch dialog and widen layout menu

This commit is contained in:
tisonhuang
2026-03-02 15:33:44 +08:00
parent 0545be3244
commit 98a0233c4d
2 changed files with 51 additions and 25 deletions

View File

@@ -1487,6 +1487,11 @@ function ExportPage() {
if (payload.scope === 'content' && payload.contentType) {
if (payload.contentType === 'text') {
next.exportMedia = false
next.exportImages = false
next.exportVoices = false
next.exportVideos = false
next.exportEmojis = false
next.exportAvatars = true
} else {
next.exportMedia = true
next.exportImages = payload.contentType === 'image'
@@ -1536,6 +1541,7 @@ function ExportPage() {
if (contentType === 'text') {
return {
...base,
exportAvatars: true,
exportMedia: false,
exportImages: false,
exportVoices: false,
@@ -2365,6 +2371,10 @@ function ExportPage() {
const formatCandidateOptions = exportDialog.scope === 'sns'
? formatOptions.filter(option => option.value === 'html' || option.value === 'json')
: formatOptions
const isContentScopeDialog = exportDialog.scope === 'content'
const isContentTextDialog = isContentScopeDialog && exportDialog.contentType === 'text'
const shouldShowFormatSection = !isContentScopeDialog || isContentTextDialog
const shouldShowMediaSection = !isContentScopeDialog
const isTabCountComputing = isSharedTabCountsLoading && !isSharedTabCountsReady
const isSessionCardStatsLoading = isBaseConfigLoading || (isSharedTabCountsLoading && !isSharedTabCountsReady)
const isSnsCardStatsLoading = !hasSeededSnsStats
@@ -2948,21 +2958,26 @@ function ExportPage() {
</div>
</div>
<div className="dialog-section">
<h4></h4>
<div className="format-grid">
{formatCandidateOptions.map(option => (
<button
key={option.value}
className={`format-card ${options.format === option.value ? 'active' : ''}`}
onClick={() => setOptions(prev => ({ ...prev, format: option.value }))}
>
<div className="format-label">{option.label}</div>
<div className="format-desc">{option.desc}</div>
</button>
))}
{shouldShowFormatSection && (
<div className="dialog-section">
<h4></h4>
{isContentTextDialog && (
<div className="format-note"></div>
)}
<div className="format-grid">
{formatCandidateOptions.map(option => (
<button
key={option.value}
className={`format-card ${options.format === option.value ? 'active' : ''}`}
onClick={() => setOptions(prev => ({ ...prev, format: option.value }))}
>
<div className="format-label">{option.label}</div>
<div className="format-desc">{option.desc}</div>
</button>
))}
</div>
</div>
</div>
)}
<div className="dialog-section">
<h4></h4>
@@ -3018,17 +3033,19 @@ function ExportPage() {
)}
</div>
<div className="dialog-section">
<h4></h4>
<div className="media-check-grid">
<label><input type="checkbox" checked={options.exportImages} onChange={event => setOptions(prev => ({ ...prev, exportImages: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportVoices} onChange={event => setOptions(prev => ({ ...prev, exportVoices: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportVideos} onChange={event => setOptions(prev => ({ ...prev, exportVideos: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportEmojis} onChange={event => setOptions(prev => ({ ...prev, exportEmojis: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportVoiceAsText} onChange={event => setOptions(prev => ({ ...prev, exportVoiceAsText: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportAvatars} onChange={event => setOptions(prev => ({ ...prev, exportAvatars: event.target.checked }))} /> </label>
{shouldShowMediaSection && (
<div className="dialog-section">
<h4></h4>
<div className="media-check-grid">
<label><input type="checkbox" checked={options.exportImages} onChange={event => setOptions(prev => ({ ...prev, exportImages: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportVoices} onChange={event => setOptions(prev => ({ ...prev, exportVoices: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportVideos} onChange={event => setOptions(prev => ({ ...prev, exportVideos: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportEmojis} onChange={event => setOptions(prev => ({ ...prev, exportEmojis: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportVoiceAsText} onChange={event => setOptions(prev => ({ ...prev, exportVoiceAsText: event.target.checked }))} /> </label>
<label><input type="checkbox" checked={options.exportAvatars} onChange={event => setOptions(prev => ({ ...prev, exportAvatars: event.target.checked }))} /> </label>
</div>
</div>
</div>
)}
<div className="dialog-section">
<h4></h4>