From f4fd5bb797ce57dc864e35525457e10f3e0abee5 Mon Sep 17 00:00:00 2001 From: 2977094657 <2977094657@qq.com> Date: Sun, 15 Mar 2026 14:45:17 +0800 Subject: [PATCH] fix: support self sns filter and export --- src/components/Sns/SnsFilterPanel.tsx | 35 ++++++-- src/pages/SnsPage.scss | 106 +++++++++++++++++++---- src/pages/SnsPage.tsx | 117 ++++++++++++++++++++------ 3 files changed, 208 insertions(+), 50 deletions(-) diff --git a/src/components/Sns/SnsFilterPanel.tsx b/src/components/Sns/SnsFilterPanel.tsx index 654d543..ed7e3de 100644 --- a/src/components/Sns/SnsFilterPanel.tsx +++ b/src/components/Sns/SnsFilterPanel.tsx @@ -8,6 +8,7 @@ interface Contact { avatarUrl?: string postCount?: number postCountStatus?: 'idle' | 'loading' | 'ready' + isCurrentUser?: boolean } interface ContactsCountProgress { @@ -68,7 +69,7 @@ export const SnsFilterPanel: React.FC = ({ return '正在加载联系人...' } if (contacts.length === 0) { - return '暂无好友或曾经的好友' + return '暂无可筛选联系人' } return '没有找到联系人' } @@ -118,7 +119,7 @@ export const SnsFilterPanel: React.FC = ({
setContactSearch(e.target.value)} /> @@ -143,18 +144,26 @@ export const SnsFilterPanel: React.FC = ({
{filteredContacts.map(contact => { const isPostCountReady = contact.postCountStatus === 'ready' + const isPostCountLoading = contact.postCountStatus === 'loading' const isSelected = selectedContactLookup.has(contact.username) const isActive = activeContactUsername === contact.username + const displayName = contact.displayName || (contact.isCurrentUser ? '我' : contact.username) + const selectTitle = contact.isCurrentUser + ? (isSelected ? '取消选择当前账号的朋友圈' : '选择当前账号的朋友圈') + : (isSelected ? `取消选择 ${displayName}` : `选择 ${displayName}`) + const openTitle = contact.isCurrentUser + ? '查看我发的朋友圈' + : `查看 ${displayName} 的朋友圈` return (
diff --git a/src/pages/SnsPage.scss b/src/pages/SnsPage.scss index 45fcfbc..f8a8c90 100644 --- a/src/pages/SnsPage.scss +++ b/src/pages/SnsPage.scss @@ -1295,6 +1295,26 @@ color: var(--text-primary); } + &.is-current-user .contact-main-btn { + background: color-mix(in srgb, var(--primary) 6%, var(--bg-primary)); + border-color: color-mix(in srgb, var(--primary) 18%, var(--border-color)); + } + + &.is-current-user.is-selected .contact-main-btn { + background: rgba(var(--primary-rgb), 0.1); + border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color)); + } + + &.is-current-user.is-active .contact-main-btn { + background: rgba(var(--primary-rgb), 0.15); + border-color: color-mix(in srgb, var(--primary) 54%, var(--border-color)); + } + + &.is-current-user .contact-name { + color: var(--text-primary); + font-weight: 600; + } + .contact-select-btn { width: 32px; height: 32px; @@ -1314,6 +1334,11 @@ color: var(--primary); } + &:focus-visible { + outline: 2px solid color-mix(in srgb, var(--primary) 72%, transparent); + outline-offset: 2px; + } + &.checked { color: var(--primary); } @@ -1336,6 +1361,11 @@ &:hover { background: var(--hover-bg); } + + &:focus-visible { + outline: 2px solid color-mix(in srgb, var(--primary) 72%, transparent); + outline-offset: 2px; + } } .contact-meta { @@ -1343,15 +1373,49 @@ min-width: 0; display: flex; flex-direction: column; - gap: 2px; + gap: 4px; + + .contact-name-row { + display: flex; + align-items: center; + gap: 6px; + min-width: 0; + } .contact-name { + display: block; + flex: 1 1 auto; + min-width: 0; font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + + .contact-self-badge { + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 18px; + padding: 0 8px; + border-radius: 999px; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.02em; + color: var(--primary); + background: rgba(var(--primary-rgb), 0.12); + border: 1px solid rgba(var(--primary-rgb), 0.18); + } + + .contact-subtitle { + font-size: 11px; + color: var(--text-tertiary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } .contact-post-count-wrap { @@ -1368,6 +1432,10 @@ color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; + + &.is-empty { + letter-spacing: 0.08em; + } } .contact-post-count-loading { @@ -1751,8 +1819,9 @@ background: var(--bg-secondary); border-radius: var(--sns-border-radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); - width: 480px; + width: 460px; max-width: 92vw; + max-height: calc(100vh - 48px); display: flex; flex-direction: column; border: 1px solid var(--border-color); @@ -1760,7 +1829,7 @@ animation: slide-up-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1); .export-dialog-header { - padding: 16px 20px; + padding: 14px 18px; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); display: flex; @@ -1796,10 +1865,13 @@ } .export-dialog-body { - padding: 20px; + padding: 16px 18px 18px; display: flex; flex-direction: column; - gap: 18px; + gap: 14px; + min-height: 0; + overflow-y: auto; + overscroll-behavior: contain; } } @@ -1808,7 +1880,7 @@ align-items: center; gap: 8px; flex-wrap: wrap; - padding: 10px 14px; + padding: 8px 12px; background: var(--bg-tertiary); border-radius: 8px; border: 1px solid var(--border-color); @@ -1823,10 +1895,10 @@ } .filter-tag { - font-size: 13px; + font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); - padding: 2px 10px; + padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border-color); display: flex; @@ -1848,7 +1920,7 @@ .export-section { display: flex; flex-direction: column; - gap: 8px; + gap: 6px; } .export-section-header { @@ -1893,14 +1965,14 @@ .export-format-options { display: grid; grid-template-columns: 1fr 1fr; - gap: 10px; + gap: 8px; .format-option { display: flex; flex-direction: column; align-items: center; gap: 4px; - padding: 14px 10px; + padding: 12px 8px; border-radius: 10px; border: 2px solid var(--border-color); background: var(--bg-primary); @@ -2424,7 +2496,7 @@ .export-media-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); - gap: 8px; + gap: 6px; label { display: inline-flex; @@ -2432,7 +2504,7 @@ gap: 6px; font-size: 13px; color: var(--text-primary); - padding: 8px 10px; + padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); @@ -2550,10 +2622,10 @@ display: flex; align-items: center; gap: 8px; - padding: 10px 12px; + padding: 8px 10px; background: var(--bg-secondary); border-radius: 8px; - margin: 8px 0; + margin: 4px 0; color: var(--text-tertiary); font-size: 12px; border: 1px dashed var(--border-color); @@ -2566,8 +2638,8 @@ .export-actions { display: flex; - gap: 12px; - margin-top: 24px; + gap: 10px; + margin-top: 14px; button { flex: 1; diff --git a/src/pages/SnsPage.tsx b/src/pages/SnsPage.tsx index fb8f009..07e7d43 100644 --- a/src/pages/SnsPage.tsx +++ b/src/pages/SnsPage.tsx @@ -39,6 +39,7 @@ interface Contact { lastSessionTimestamp?: number postCount?: number postCountStatus?: ContactPostCountStatus + isCurrentUser?: boolean } interface SidebarUserProfile { @@ -193,11 +194,15 @@ export default function SnsPage() { }, [contacts]) useEffect(() => { const contactLookup = new Set(contacts.map((contact) => contact.username)) + const currentUserUsername = normalizeAccountId(currentUserProfile.wxid) + if (currentUserUsername) { + contactLookup.add(currentUserUsername) + } setSelectedContactUsernames((prev) => { const next = prev.filter((username) => contactLookup.has(username)) return next.length === prev.length ? prev : next }) - }, [contacts]) + }, [contacts, currentUserProfile.wxid]) useEffect(() => { overviewStatsRef.current = overviewStats }, [overviewStats]) @@ -385,27 +390,88 @@ export default function SnsPage() { }) || null }, [contacts, currentUserProfile.alias, currentUserProfile.displayName, currentUserProfile.wxid]) + const currentUserFilterContact = useMemo(() => { + const normalizedWxid = normalizeAccountId(currentUserProfile.wxid) + const fallbackDisplayName = String( + resolvedCurrentUserContact?.displayName + || currentUserProfile.displayName + || '我' + ).trim() + const fallbackAvatarUrl = resolvedCurrentUserContact?.avatarUrl || currentUserProfile.avatarUrl + const fallbackPostCount = typeof resolvedCurrentUserContact?.postCount === 'number' + ? normalizePostCount(resolvedCurrentUserContact.postCount) + : (typeof overviewStats.myPosts === 'number' && Number.isFinite(overviewStats.myPosts) + ? Math.max(0, Math.floor(overviewStats.myPosts)) + : undefined) + const fallbackPostStatus: ContactPostCountStatus = resolvedCurrentUserContact + ? (resolvedCurrentUserContact.postCountStatus || (fallbackPostCount !== undefined ? 'ready' : 'idle')) + : (fallbackPostCount !== undefined + ? 'ready' + : (contactsLoading || overviewStatsStatus === 'loading' ? 'loading' : 'idle')) + + if (resolvedCurrentUserContact) { + return { + ...resolvedCurrentUserContact, + displayName: resolvedCurrentUserContact.displayName || fallbackDisplayName, + avatarUrl: resolvedCurrentUserContact.avatarUrl || fallbackAvatarUrl, + postCount: typeof resolvedCurrentUserContact.postCount === 'number' + ? normalizePostCount(resolvedCurrentUserContact.postCount) + : fallbackPostCount, + postCountStatus: resolvedCurrentUserContact.postCountStatus || fallbackPostStatus, + isCurrentUser: true + } + } + + if (!normalizedWxid) return null + + return { + username: normalizedWxid, + displayName: fallbackDisplayName || normalizedWxid, + avatarUrl: fallbackAvatarUrl, + type: 'sns_only', + postCount: fallbackPostCount, + postCountStatus: fallbackPostStatus, + isCurrentUser: true + } + }, [ + contactsLoading, + currentUserProfile.avatarUrl, + currentUserProfile.displayName, + currentUserProfile.wxid, + normalizePostCount, + overviewStats.myPosts, + overviewStatsStatus, + resolvedCurrentUserContact + ]) + + const filterableContacts = useMemo(() => { + if (!currentUserFilterContact) return contacts + const currentUserKey = normalizeAccountId(currentUserFilterContact.username) + const otherContacts = contacts.filter((contact) => normalizeAccountId(contact.username) !== currentUserKey) + return [currentUserFilterContact, ...otherContacts] + }, [contacts, currentUserFilterContact]) + const currentTimelineTargetContact = useMemo(() => { const normalizedTargetUsername = String(authorTimelineTarget?.username || '').trim() if (!normalizedTargetUsername) return null - return contacts.find((contact) => contact.username === normalizedTargetUsername) || null - }, [authorTimelineTarget, contacts]) + return filterableContacts.find((contact) => contact.username === normalizedTargetUsername) || null + }, [authorTimelineTarget, filterableContacts]) const exportSelectedContactsSummary = useMemo(() => { if (exportScope.kind !== 'selected' || exportScope.usernames.length === 0) return '' - const contactMap = new Map(contacts.map((contact) => [contact.username, contact])) + const contactMap = new Map(filterableContacts.map((contact) => [contact.username, contact])) const names = exportScope.usernames.map((username) => contactMap.get(username)?.displayName || username) if (names.length <= 2) return names.join('、') return `${names.slice(0, 2).join('、')} 等 ${names.length} 位联系人` - }, [contacts, exportScope]) + }, [exportScope, filterableContacts]) const selectedFeedContactsSummary = useMemo(() => { if (selectedContactUsernames.length === 0) return '' - const contactMap = new Map(contacts.map((contact) => [contact.username, contact])) + const contactMap = new Map(filterableContacts.map((contact) => [contact.username, contact])) const names = selectedContactUsernames.map((username) => contactMap.get(username)?.displayName || username) if (names.length <= 2) return names.join('、') return `${names.slice(0, 2).join('、')} 等 ${names.length} 人` - }, [contacts, selectedContactUsernames]) + }, [filterableContacts, selectedContactUsernames]) const selectedContactUsernameSet = useMemo(() => ( new Set(selectedContactUsernames.map((username) => normalizeAccountId(username))) @@ -417,30 +483,31 @@ export default function SnsPage() { }, [posts, selectedContactUsernameSet]) const myTimelineCount = useMemo(() => { - if (resolvedCurrentUserContact?.postCountStatus === 'ready' && typeof resolvedCurrentUserContact.postCount === 'number') { - return normalizePostCount(resolvedCurrentUserContact.postCount) + if (typeof currentUserFilterContact?.postCount === 'number') { + return normalizePostCount(currentUserFilterContact.postCount) } return null - }, [normalizePostCount, resolvedCurrentUserContact]) + }, [currentUserFilterContact, normalizePostCount]) const myTimelineCountLoading = Boolean( - resolvedCurrentUserContact - ? resolvedCurrentUserContact.postCountStatus !== 'ready' + currentUserFilterContact + ? currentUserFilterContact.postCountStatus === 'loading' : overviewStatsStatus === 'loading' || contactsLoading ) + const currentUserTimelineUsername = String(currentUserFilterContact?.username || '').trim() const canStartExport = Boolean(exportFolder) && !isExporting && ( exportScope.kind === 'all' || exportScope.usernames.length > 0 ) const openCurrentUserTimeline = useCallback(() => { - if (!resolvedCurrentUserContact) return + if (!currentUserFilterContact) return setAuthorTimelineTarget({ - username: resolvedCurrentUserContact.username, - displayName: resolvedCurrentUserContact.displayName || currentUserProfile.displayName || resolvedCurrentUserContact.username, - avatarUrl: resolvedCurrentUserContact.avatarUrl || currentUserProfile.avatarUrl + username: currentUserFilterContact.username, + displayName: currentUserFilterContact.displayName || currentUserProfile.displayName || currentUserFilterContact.username, + avatarUrl: currentUserFilterContact.avatarUrl || currentUserProfile.avatarUrl }) - }, [currentUserProfile.avatarUrl, currentUserProfile.displayName, resolvedCurrentUserContact]) + }, [currentUserFilterContact, currentUserProfile.avatarUrl, currentUserProfile.displayName]) const isDefaultViewNow = useCallback(() => { return ( @@ -1263,12 +1330,12 @@ export default function SnsPage() {