diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss index 7be9dfe..c278b24 100644 --- a/src/pages/ExportPage.scss +++ b/src/pages/ExportPage.scss @@ -1144,6 +1144,16 @@ .contacts-list-header-main { flex: 1; min-width: 0; + display: flex; + align-items: center; + gap: 8px; + } + + .contacts-list-header-main-label { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .contacts-list-header-count { @@ -1157,7 +1167,10 @@ .contacts-list-header-actions { width: var(--contacts-action-col-width); - text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; flex-shrink: 0; } @@ -1183,78 +1196,63 @@ } } - .contacts-selection-toolbar { - display: flex; + .selection-toggle-btn, + .selection-clear-btn { + border: 1px solid var(--border-color); + border-radius: 8px; + background: var(--bg-secondary); + color: var(--text-secondary); + font-size: 12px; + padding: 6px 10px; + cursor: pointer; + + &:hover:not(:disabled) { + border-color: var(--text-tertiary); + color: var(--text-primary); + } + + &:disabled { + opacity: 0.65; + cursor: not-allowed; + } + } + + .selection-toggle-btn { + padding: 4px 8px; + font-size: 11px; + line-height: 1.2; + white-space: nowrap; + } + + .selection-export-btn { + border: none; + border-radius: 8px; + padding: 6px 10px; + background: var(--primary); + color: #fff; + font-size: 12px; + cursor: pointer; + display: inline-flex; align-items: center; - gap: 8px; - padding: 10px 12px 8px; - border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent); - background: color-mix(in srgb, var(--bg-primary) 88%, var(--bg-secondary)); - flex-wrap: wrap; + gap: 6px; - .selection-toggle-btn, - .selection-clear-btn { - border: 1px solid var(--border-color); - border-radius: 8px; - background: var(--bg-secondary); - color: var(--text-secondary); - font-size: 12px; - padding: 6px 10px; - cursor: pointer; - - &:hover:not(:disabled) { - border-color: var(--text-tertiary); - color: var(--text-primary); - } - - &:disabled { - opacity: 0.65; - cursor: not-allowed; - } + &:hover:not(:disabled) { + background: var(--primary-hover); } - .selection-summary { - font-size: 12px; - color: var(--text-secondary); - font-weight: 600; - - &.muted { - color: var(--text-tertiary); - font-weight: 500; - } - } - - .selection-export-btn { - border: none; - border-radius: 8px; - padding: 6px 10px; - background: var(--primary); + .selection-export-count { + min-width: 18px; + height: 18px; + padding: 0 5px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.2); color: #fff; - font-size: 12px; - cursor: pointer; - margin-left: auto; - display: inline-flex; + font-size: 11px; + font-weight: 700; + display: flex; align-items: center; - gap: 6px; - - &:hover:not(:disabled) { - background: var(--primary-hover); - } - - .selection-export-count { - min-width: 18px; - height: 18px; - padding: 0 5px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.2); - color: #fff; - font-size: 11px; - font-weight: 700; - display: inline-flex; - align-items: center; - justify-content: center; - font-variant-numeric: tabular-nums; - } + justify-content: center; + font-variant-numeric: tabular-nums; } } @@ -2700,12 +2698,17 @@ padding: 8px 10px 6px; } - .table-wrap .contacts-selection-toolbar { - padding: 8px 10px 6px; + .table-wrap .contacts-list-header-main { + gap: 6px; + } - .selection-export-btn { - margin-left: 0; - } + .table-wrap .selection-toggle-btn { + padding: 3px 7px; + font-size: 10px; + } + + .table-wrap .contacts-list-header-actions { + gap: 6px; } .table-wrap .contacts-list { diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx index 7eab8c2..49d9702 100644 --- a/src/pages/ExportPage.tsx +++ b/src/pages/ExportPage.tsx @@ -3761,24 +3761,12 @@ function ExportPage() { return sessions.reduce((count, session) => (session.avatarUrl ? count + 1 : count), 0) }, [sessions]) - const visibleSelectedCount = useMemo(() => { - const visibleSet = new Set( - filteredContacts - .filter(contact => sessionRowByUsername.get(contact.username)?.hasSession) - .map(contact => contact.username) - ) - let count = 0 - for (const id of selectedSessions) { - if (visibleSet.has(id)) count += 1 - } - return count - }, [filteredContacts, selectedSessions, sessionRowByUsername]) const visibleSelectableCount = useMemo(() => ( filteredContacts.reduce((count, contact) => ( sessionRowByUsername.get(contact.username)?.hasSession ? count + 1 : count ), 0) ), [filteredContacts, sessionRowByUsername]) - const isAllVisibleSelected = visibleSelectableCount > 0 && visibleSelectedCount === visibleSelectableCount + const isAllVisibleSelected = visibleSelectableCount > 0 && selectedCount === visibleSelectableCount const canCreateTask = exportDialog.scope === 'sns' ? Boolean(exportFolder) @@ -4174,8 +4162,8 @@ function ExportPage() { )} {hasFilteredContacts && ( - <> -
+
+ + + - - 当前筛选 {visibleSelectedCount}/{visibleSelectableCount} - - + 联系人(头像/名称/微信号) + + 总消息数 + {selectedCount > 0 && ( - + <> + + + )} -
-
- 选择 - 联系人(头像/名称/微信号) - 总消息数 - 操作 -
- + +
)}