hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-24 23:06:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(export): show loading icon for media metric columns

Browse Source
This commit is contained in:
aits2026
2026-03-05 16:34:16 +08:00
parent f18fb83a92
commit 4da697f507
2 changed files with 38 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/ExportPage.scss
View File

@@ -1382,10 +1382,14 @@
line-height: 1.2; line-height: 1.2;
color: var(--text-secondary); color: var(--text-secondary);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
display: inline-flex;
&.loading { align-items: center;
color: var(--text-tertiary); justify-content: center;
min-height: 14px;
} }
.row-media-metric-icon {
color: var(--text-tertiary);
} }
.row-message-stats { .row-message-stats {

44
src/pages/ExportPage.tsx
View File

@@ -4185,22 +4185,24 @@ function ExportPage() {
const hintedMessages = normalizeMessageCount(matchedSession?.messageCountHint) const hintedMessages = normalizeMessageCount(matchedSession?.messageCountHint)
const displayedMessageCount = countedMessages ?? hintedMessages const displayedMessageCount = countedMessages ?? hintedMessages
const mediaMetric = sessionContentMetrics[contact.username] const mediaMetric = sessionContentMetrics[contact.username]
const metricLoadingReady = canExport && isSessionCountStageReady
const messageCountLabel = !canExport const messageCountLabel = !canExport
? '--' ? '--'
: typeof displayedMessageCount === 'number' : typeof displayedMessageCount === 'number'
? displayedMessageCount.toLocaleString('zh-CN') ? displayedMessageCount.toLocaleString('zh-CN')
: '获取中' : '获取中'
const metricToLabel = (value: unknown): string => { const metricToDisplay = (value: unknown): { state: 'value'; text: string } | { state: 'loading' } | { state: 'na'; text: '--' } => {
const normalized = normalizeMessageCount(value) const normalized = normalizeMessageCount(value)
if (!canExport) return '--' if (!canExport) return { state: 'na', text: '--' }
if (!metricLoadingReady) return '--' if (!isSessionCountStageReady) return { state: 'loading' }
return typeof normalized === 'number' ? normalized.toLocaleString('zh-CN') : '...' if (typeof normalized === 'number') {
return { state: 'value', text: normalized.toLocaleString('zh-CN') }
} }
const emojiLabel = metricToLabel(mediaMetric?.emojiMessages) return { state: 'loading' }
const voiceLabel = metricToLabel(mediaMetric?.voiceMessages) }
const imageLabel = metricToLabel(mediaMetric?.imageMessages) const emojiMetric = metricToDisplay(mediaMetric?.emojiMessages)
const videoLabel = metricToLabel(mediaMetric?.videoMessages) const voiceMetric = metricToDisplay(mediaMetric?.voiceMessages)
const imageMetric = metricToDisplay(mediaMetric?.imageMessages)
const videoMetric = metricToDisplay(mediaMetric?.videoMessages)
const openChatLabel = contact.type === 'friend' const openChatLabel = contact.type === 'friend'
? '打开私聊' ? '打开私聊'
: contact.type === 'group' : contact.type === 'group'
@@ -4256,16 +4258,32 @@ function ExportPage() {
)} )}
</div> </div>
<div className="row-media-metric"> <div className="row-media-metric">
<strong className={`row-media-metric-value ${emojiLabel === '...' ? 'loading' : ''}`}>{emojiLabel}</strong> <strong className="row-media-metric-value">
{emojiMetric.state === 'loading'
? <Loader2 size={12} className="spin row-media-metric-icon" aria-label="统计加载中" />
: emojiMetric.text}
</strong>
</div> </div>
<div className="row-media-metric"> <div className="row-media-metric">
<strong className={`row-media-metric-value ${voiceLabel === '...' ? 'loading' : ''}`}>{voiceLabel}</strong> <strong className="row-media-metric-value">
{voiceMetric.state === 'loading'
? <Loader2 size={12} className="spin row-media-metric-icon" aria-label="统计加载中" />
: voiceMetric.text}
</strong>
</div> </div>
<div className="row-media-metric"> <div className="row-media-metric">
<strong className={`row-media-metric-value ${imageLabel === '...' ? 'loading' : ''}`}>{imageLabel}</strong> <strong className="row-media-metric-value">
{imageMetric.state === 'loading'
? <Loader2 size={12} className="spin row-media-metric-icon" aria-label="统计加载中" />
: imageMetric.text}
</strong>
</div> </div>
<div className="row-media-metric"> <div className="row-media-metric">
<strong className={`row-media-metric-value ${videoLabel === '...' ? 'loading' : ''}`}>{videoLabel}</strong> <strong className="row-media-metric-value">
{videoMetric.state === 'loading'
? <Loader2 size={12} className="spin row-media-metric-icon" aria-label="统计加载中" />
: videoMetric.text}
</strong>
</div> </div>
<div className="row-action-cell"> <div className="row-action-cell">
<div className="row-action-main"> <div className="row-action-main">