refactor: streamline sns page

2026-06-09 15:12:05 +00:00 · 2026-05-05 20:24:58 +08:00
parent 4f13b609d4
commit 5319153879
6 changed files with 396 additions and 361 deletions
--- a/src/components/Sns/ContactSnsTimelineDialog.scss
+++ b/src/components/Sns/ContactSnsTimelineDialog.scss
@@ -6,16 +6,16 @@
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
-  background: rgba(15, 23, 42, 0.38);
+  background: rgba(15, 23, 42, 0.28);
 }

 .contact-sns-dialog {
-  width: min(760px, 100%);
-  max-height: min(86vh, 860px);
-  border-radius: 14px;
+  width: min(720px, 100%);
+  max-height: min(84vh, 820px);
+  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary-solid, #ffffff);
-  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24);
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
@@ -29,7 +29,7 @@
    align-items: center;
    justify-content: space-between;
    gap: 10px;
-    padding: 14px 16px;
+    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
  }

@@ -41,9 +41,9 @@
  }

  .contact-sns-dialog-avatar {
-    width: 42px;
-    height: 42px;
-    border-radius: 10px;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    overflow: hidden;
    flex-shrink: 0;
@@ -69,7 +69,7 @@

    h4 {
      margin: 0;
-      font-size: 15px;
+      font-size: 14px;
      color: var(--text-primary);
      overflow: hidden;
      text-overflow: ellipsis;
@@ -79,7 +79,7 @@

  .contact-sns-dialog-username {
    margin-top: 2px;
-    font-size: 12px;
+    font-size: 11px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
@@ -88,7 +88,7 @@

  .contact-sns-dialog-stats {
    margin-top: 4px;
-    font-size: 12px;
+    font-size: 11px;
    color: var(--text-secondary);
  }

@@ -111,9 +111,9 @@
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-secondary);
-    height: 28px;
-    padding: 0 10px;
-    font-size: 12px;
+    height: 30px;
+    padding: 0 9px;
+    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
@@ -134,8 +134,8 @@
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
-    width: 248px;
-    max-height: calc((28px * 15) + 16px);
+    width: 228px;
+    max-height: calc((26px * 15) + 16px);
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-color));
    border-radius: 10px;
@@ -220,26 +220,20 @@
  }

  .contact-sns-dialog-tip {
-    padding: 10px 16px;
-    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
-    background: color-mix(in srgb, var(--bg-primary) 78%, var(--bg-secondary));
-    font-size: 12px;
-    line-height: 1.6;
-    color: var(--text-secondary);
-    word-break: break-word;
+    display: none;
  }

  .contact-sns-dialog-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
-    padding: 12px 16px 14px;
+    padding: 10px 12px 12px;
  }

  .contact-sns-dialog-posts-list {
    display: flex;
    flex-direction: column;
-    gap: 14px;
+    gap: 10px;
  }

  .contact-sns-dialog-posts-list .post-header-actions {
@@ -247,9 +241,9 @@
  }

  .contact-sns-dialog-status {
-    padding: 20px 12px;
+    padding: 16px 10px;
    text-align: center;
-    font-size: 13px;
+    font-size: 12px;
    color: var(--text-secondary);

    &.empty {
@@ -264,8 +258,8 @@
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 10px;
-    padding: 9px 18px;
-    font-size: 13px;
+    padding: 8px 14px;
+    font-size: 12px;
    cursor: pointer;

    &:hover:not(:disabled) {
@@ -282,15 +276,15 @@

@media (max-width: 768px) {
  .contact-sns-dialog-overlay {
-    padding: 12px 8px;
+    padding: 10px 8px;
  }

  .contact-sns-dialog {
-    width: min(100vw - 16px, 760px);
+    width: min(100vw - 16px, 720px);
    max-height: calc(100vh - 24px);

    .contact-sns-dialog-header {
-      padding: 12px;
+      padding: 10px 12px;
    }

    .contact-sns-dialog-header-actions {
@@ -300,18 +294,13 @@
    .contact-sns-dialog-rank-btn {
      height: 26px;
      padding: 0 8px;
-      font-size: 11px;
+      font-size: 10px;
    }

    .contact-sns-dialog-rank-panel {
      width: min(78vw, 232px);
    }

-    .contact-sns-dialog-tip {
-      padding: 10px 12px;
-      line-height: 1.55;
-    }
-
    .contact-sns-dialog-body {
      padding: 10px 10px 12px;
    }
--- a/src/components/Sns/ContactSnsTimelineDialog.tsx
+++ b/src/components/Sns/ContactSnsTimelineDialog.tsx
@@ -538,10 +538,6 @@ export function ContactSnsTimelineDialog({
          </div>
        </div>

-        <div className="contact-sns-dialog-tip">
-          在微信桌面客户端中打开这个人的朋友圈浏览，可快速把其朋友圈同步到这里。若你在乎这个人，一定要试试～
-        </div>
-
        <div
          className="contact-sns-dialog-body"
          onScroll={handleBodyScroll}
--- a/src/components/Sns/SnsFilterPanel.tsx
+++ b/src/components/Sns/SnsFilterPanel.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Search, User, X, Loader2, CheckSquare, Square, Download } from 'lucide-react'
+import { Virtuoso } from 'react-virtuoso'
 import { Avatar } from '../Avatar'

 interface Contact {
@@ -51,10 +52,14 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
    onClearSelectedContacts,
    onExportSelectedContacts
 }) => {
-    const filteredContacts = contacts.filter(c =>
-        (c.displayName || '').toLowerCase().includes(contactSearch.toLowerCase()) ||
-        c.username.toLowerCase().includes(contactSearch.toLowerCase())
-    )
+    const filteredContacts = React.useMemo(() => {
+        const keyword = contactSearch.trim().toLowerCase()
+        if (!keyword) return contacts
+        return contacts.filter(c =>
+            (c.displayName || '').toLowerCase().includes(keyword) ||
+            c.username.toLowerCase().includes(keyword)
+        )
+    }, [contacts, contactSearch])
    const selectedContactLookup = React.useMemo(
        () => new Set(selectedContactUsernames),
        [selectedContactUsernames]
@@ -85,10 +90,52 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
        return '没有找到联系人'
    }

+    const renderContactRow = React.useCallback((_: number, contact: Contact) => {
+        const isPostCountReady = contact.postCountStatus === 'ready'
+        const isSelected = selectedContactLookup.has(contact.username)
+        const isActive = activeContactUsername === contact.username
+
+        return (
+            <div
+                className={`contact-row${isSelected ? ' is-selected' : ''}${isActive ? ' is-active' : ''}`}
+            >
+                <button
+                    type="button"
+                    className={`contact-select-btn${isSelected ? ' checked' : ''}`}
+                    onClick={() => onToggleContactSelected(contact)}
+                    title={isSelected ? `取消选择 ${contact.displayName}` : `选择 ${contact.displayName}`}
+                    aria-pressed={isSelected}
+                >
+                    {isSelected ? <CheckSquare size={14} /> : <Square size={14} />}
+                </button>
+                <button
+                    type="button"
+                    className="contact-main-btn"
+                    onClick={() => onOpenContactTimeline(contact)}
+                    title={`查看 ${contact.displayName} 的朋友圈`}
+                >
+                    <Avatar src={contact.avatarUrl} name={contact.displayName} size={28} shape="rounded" />
+                    <div className="contact-meta">
+                        <span className="contact-name">{contact.displayName}</span>
+                    </div>
+                    <div className="contact-post-count-wrap">
+                        {isPostCountReady ? (
+                            <span className="contact-post-count">{Math.max(0, Math.floor(Number(contact.postCount || 0)))}条</span>
+                        ) : (
+                            <span className="contact-post-count-loading" title="统计中">
+                                <Loader2 size={12} className="spinning" />
+                            </span>
+                        )}
+                    </div>
+                </button>
+            </div>
+        )
+    }, [activeContactUsername, onOpenContactTimeline, onToggleContactSelected, selectedContactLookup])
+
    return (
        <aside className="sns-filter-panel">
            <div className="filter-header">
-                <h3>筛选条件</h3>
+                <h3>筛选</h3>
                {(searchKeyword || contactSearch) && (
                    <button className="reset-all-btn" onClick={clearFilters} title="重置所有筛选">
                        <RefreshCw size={14} />
@@ -101,12 +148,12 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                <div className="filter-widget search-widget">
                    <div className="widget-header">
                        <Search size={14} />
-                        <span>关键词搜索</span>
+                        <span>关键词</span>
                    </div>
                    <div className="input-group">
                        <input
                            type="text"
-                            placeholder="搜索动态内容..."
+                            placeholder="搜索动态"
                            value={searchKeyword}
                            onChange={e => setSearchKeyword(e.target.value)}
                        />
@@ -130,7 +177,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)}
                        />
@@ -162,53 +209,17 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
                        </div>
                    )}

-                    <div className="contact-interaction-hint">
-                        点左侧可多选下载，点右侧可查看单人详情
-                    </div>
-
                    <div className="contact-list-scroll">
-                        {filteredContacts.map(contact => {
-                            const isPostCountReady = contact.postCountStatus === 'ready'
-                            const isSelected = selectedContactLookup.has(contact.username)
-                            const isActive = activeContactUsername === contact.username
-                            return (
-                                <div
-                                    key={contact.username}
-                                    className={`contact-row${isSelected ? ' is-selected' : ''}${isActive ? ' is-active' : ''}`}
-                                >
-                                    <button
-                                        type="button"
-                                        className={`contact-select-btn${isSelected ? ' checked' : ''}`}
-                                        onClick={() => onToggleContactSelected(contact)}
-                                        title={isSelected ? `取消选择 ${contact.displayName}` : `选择 ${contact.displayName}`}
-                                        aria-pressed={isSelected}
-                                    >
-                                        {isSelected ? <CheckSquare size={16} /> : <Square size={16} />}
-                                    </button>
-                                    <button
-                                        type="button"
-                                        className="contact-main-btn"
-                                        onClick={() => onOpenContactTimeline(contact)}
-                                        title={`查看 ${contact.displayName} 的朋友圈`}
-                                    >
-                                        <Avatar src={contact.avatarUrl} name={contact.displayName} size={36} shape="rounded" />
-                                        <div className="contact-meta">
-                                            <span className="contact-name">{contact.displayName}</span>
-                                        </div>
-                                        <div className="contact-post-count-wrap">
-                                            {isPostCountReady ? (
-                                                <span className="contact-post-count">{Math.max(0, Math.floor(Number(contact.postCount || 0)))}条</span>
-                                            ) : (
-                                                <span className="contact-post-count-loading" title="统计中">
-                                                    <Loader2 size={13} className="spinning" />
-                                                </span>
-                                            )}
-                                        </div>
-                                    </button>
-                                </div>
-                            )
-                        })}
-                        {filteredContacts.length === 0 && (
+                        {filteredContacts.length > 0 ? (
+                            <Virtuoso
+                                className="contact-list-virtuoso"
+                                data={filteredContacts}
+                                computeItemKey={(_, contact) => contact.username}
+                                fixedItemHeight={40}
+                                itemContent={renderContactRow}
+                                overscan={320}
+                            />
+                        ) : (
                            <div className="empty-state">{getEmptyStateText()}</div>
                        )}
                    </div>
--- a/src/components/Sns/SnsPostItem.tsx
+++ b/src/components/Sns/SnsPostItem.tsx
@@ -493,7 +493,7 @@ export const SnsPostItem: React.FC<SnsPostItemProps> = ({ post, onPreview, onDeb
                        <Avatar
                            src={post.avatarUrl}
                            name={post.nickname}
-                            size={48}
+                            size={36}
                            shape="rounded"
                        />
                    </button>