Merge pull request #442 from 2977094657/issue-399-383-sns-self-filter-export

fix: 修复朋友圈仅看自己和导出自己

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<SnsFilterPanelProps> = ({
             return '正在加载联系人...'
         }
         if (contacts.length === 0) {
-            return '暂无好友或曾经的好友'
+            return '暂无可筛选联系人'
         }
         return '没有找到联系人'
     }
@@ -118,7 +119,7 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                     <div className="contact-search-bar">
                         <input
                             type="text"
-                            placeholder="查找好友..."
+                            placeholder="查找联系人..."
                             value={contactSearch}
                             onChange={e => setContactSearch(e.target.value)}
                         />
@@ -143,18 +144,26 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                     <div className="contact-list-scroll">
                         {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 (
                                 <div
                                     key={contact.username}
-                                    className={`contact-row${isSelected ? ' is-selected' : ''}${isActive ? ' is-active' : ''}`}
+                                    className={`contact-row${isSelected ? ' is-selected' : ''}${isActive ? ' is-active' : ''}${contact.isCurrentUser ? ' is-current-user' : ''}`}
                                 >
                                     <button
                                         type="button"
                                         className={`contact-select-btn${isSelected ? ' checked' : ''}`}
                                         onClick={() => onToggleContactSelected(contact)}
-                                        title={isSelected ? `取消选择 ${contact.displayName}` : `选择 ${contact.displayName}`}
+                                        title={selectTitle}
                                         aria-pressed={isSelected}
                                     >
                                         {isSelected ? <CheckSquare size={16} /> : <Square size={16} />}
@@ -163,19 +172,29 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                                         type="button"
                                         className="contact-main-btn"
                                         onClick={() => onOpenContactTimeline(contact)}
-                                        title={`查看 ${contact.displayName} 的朋友圈`}
+                                        title={openTitle}
                                     >
-                                        <Avatar src={contact.avatarUrl} name={contact.displayName} size={36} shape="rounded" />
+                                        <Avatar src={contact.avatarUrl} name={displayName} size={36} shape="rounded" />
                                         <div className="contact-meta">
-                                            <span className="contact-name">{contact.displayName}</span>
+                                            <span className="contact-name-row">
+                                                <span className="contact-name">{displayName}</span>
+                                                {contact.isCurrentUser && <span className="contact-self-badge">当前账号</span>}
+                                            </span>
+                                            {contact.isCurrentUser && (
+                                                <span className="contact-subtitle">{contact.username}</span>
+                                            )}
                                         </div>
                                         <div className="contact-post-count-wrap">
                                             {isPostCountReady ? (
                                                 <span className="contact-post-count">{Math.max(0, Math.floor(Number(contact.postCount || 0)))}条</span>
-                                            ) : (
+                                            ) : isPostCountLoading ? (
                                                 <span className="contact-post-count-loading" title="统计中">
                                                     <Loader2 size={13} className="spinning" />
                                                 </span>
+                                            ) : (
+                                                <span className="contact-post-count is-empty" title="暂无统计">
+                                                    --
+                                                </span>
                                             )}
                                         </div>
                                     </button>

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;
+    gap: 10px;
-    margin-top: 24px;
+    margin-top: 14px;
 
     button {
         flex: 1;

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<Contact | null>(() => {
+        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
+        return filterableContacts.find((contact) => contact.username === normalizedTargetUsername) || null
-    }, [authorTimelineTarget, contacts])
+    }, [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') {
+        if (typeof currentUserFilterContact?.postCount === 'number') {
-            return normalizePostCount(resolvedCurrentUserContact.postCount)
+            return normalizePostCount(currentUserFilterContact.postCount)
         }
         return null
-    }, [normalizePostCount, resolvedCurrentUserContact])
+    }, [currentUserFilterContact, normalizePostCount])
 
     const myTimelineCountLoading = Boolean(
-        resolvedCurrentUserContact
+        currentUserFilterContact
-            ? resolvedCurrentUserContact.postCountStatus !== 'ready'
+            ? 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,
+            username: currentUserFilterContact.username,
-            displayName: resolvedCurrentUserContact.displayName || currentUserProfile.displayName || resolvedCurrentUserContact.username,
+            displayName: currentUserFilterContact.displayName || currentUserProfile.displayName || currentUserFilterContact.username,
-            avatarUrl: resolvedCurrentUserContact.avatarUrl || currentUserProfile.avatarUrl
+            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() {
                                 <span className="feed-stats-divider" aria-hidden="true">｜</span>
                                 <button
                                     type="button"
-                                    className={`feed-my-timeline-entry ${resolvedCurrentUserContact ? 'ready' : ''} ${myTimelineCountLoading ? 'loading' : ''}`}
+                                    className={`feed-my-timeline-entry ${currentUserFilterContact ? 'ready' : ''} ${myTimelineCountLoading ? 'loading' : ''}`}
                                     onClick={openCurrentUserTimeline}
-                                    disabled={!resolvedCurrentUserContact}
+                                    disabled={!currentUserFilterContact}
-                                    title={resolvedCurrentUserContact
+                                    title={currentUserFilterContact
-                                        ? `打开${resolvedCurrentUserContact.displayName || '我'}的朋友圈详情`
+                                        ? `打开${currentUserFilterContact.displayName || '我'}的朋友圈详情`
-                                        : '未在右侧联系人列表中匹配到当前账号'}
+                                        : '当前账号尚未识别，暂时无法单独筛选'}
                                 >
                                     <span className="feed-my-timeline-label">我的朋友圈</span>
                                     <span className="feed-my-timeline-count">
@@ -1487,7 +1554,7 @@ export default function SnsPage() {
                             ? `${overviewStats.totalFriends} 位好友`
                             : undefined
                 }
-                contacts={contacts}
+                contacts={filterableContacts}
                 contactSearch={contactSearch}
                 setContactSearch={setContactSearch}
                 loading={contactsLoading}
@@ -1504,12 +1571,12 @@ export default function SnsPage() {
             <ContactSnsTimelineDialog
                 target={authorTimelineTarget}
                 onClose={closeAuthorTimeline}
-                initialTotalPosts={authorTimelineTarget?.username === resolvedCurrentUserContact?.username
+                initialTotalPosts={authorTimelineTarget?.username === currentUserTimelineUsername
                     ? myTimelineCount
                     : currentTimelineTargetContact?.postCountStatus === 'ready'
                         ? normalizePostCount(currentTimelineTargetContact.postCount)
                         : null}
-                initialTotalPostsLoading={Boolean(authorTimelineTarget?.username === resolvedCurrentUserContact?.username
+                initialTotalPostsLoading={Boolean(authorTimelineTarget?.username === currentUserTimelineUsername
                     ? myTimelineCount === null && myTimelineCountLoading
                     : currentTimelineTargetContact?.postCountStatus === 'loading')}
                 isProtected={triggerInstalled === true}