style(sns): reorder summary and my timeline

This commit is contained in:
aits2026
2026-03-06 15:46:30 +08:00
parent 0599de372a
commit c641c86598
2 changed files with 48 additions and 22 deletions

View File

@@ -68,6 +68,10 @@
}
.feed-stats-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
color: var(--text-secondary);
line-height: 1.4;
@@ -81,6 +85,20 @@
}
}
.feed-stats-range {
gap: 0;
}
.feed-overview-total {
font-size: inherit;
color: inherit;
white-space: nowrap;
}
.feed-stats-divider {
color: color-mix(in srgb, var(--text-secondary) 78%, transparent);
}
.feed-my-timeline-entry {
display: inline-flex;
align-items: center;
@@ -89,7 +107,7 @@
padding: 0;
border: none;
background: transparent;
font-size: 14px;
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
cursor: default;

View File

@@ -537,7 +537,7 @@ export default function SnsPage() {
}
}, [persistSnsPageCache])
const renderOverviewStats = () => {
const renderOverviewRangeText = () => {
if (overviewStatsStatus === 'error') {
return (
<button type="button" className="feed-stats-retry" onClick={() => { void loadOverviewStats() }}>
@@ -548,7 +548,7 @@ export default function SnsPage() {
if (overviewStatsStatus === 'loading') {
return '统计中...'
}
return `${overviewStats.totalPosts} ${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)}`
return `${formatDateOnly(overviewStats.earliestTime)} ~ ${formatDateOnly(overviewStats.latestTime)}`
}
const loadPosts = useCallback(async (options: { reset?: boolean, direction?: 'older' | 'newer' } = {}) => {
@@ -1059,26 +1059,34 @@ export default function SnsPage() {
<div className="feed-header">
<div className="feed-header-main">
<h2></h2>
<button
type="button"
className={`feed-my-timeline-entry ${resolvedCurrentUserContact ? 'ready' : ''} ${myTimelineCountLoading ? 'loading' : ''}`}
onClick={openCurrentUserTimeline}
disabled={!resolvedCurrentUserContact}
title={resolvedCurrentUserContact
? `打开${resolvedCurrentUserContact.displayName || '我'}的朋友圈详情`
: '未在右侧联系人列表中匹配到当前账号'}
>
<span className="feed-my-timeline-label"></span>
<span className="feed-my-timeline-count">
{myTimelineCount !== null
? `${myTimelineCount.toLocaleString('zh-CN')}`
: myTimelineCountLoading
? <Loader2 size={14} className="spin" aria-hidden="true" />
: '--'}
</span>
</button>
<div className={`feed-stats-line ${overviewStatsStatus}`}>
{renderOverviewStats()}
<span className="feed-overview-total">
{overviewStatsStatus === 'loading'
? '共 统计中...'
: `${overviewStats.totalPosts.toLocaleString('zh-CN')}`}
</span>
<span className="feed-stats-divider" aria-hidden="true"></span>
<button
type="button"
className={`feed-my-timeline-entry ${resolvedCurrentUserContact ? 'ready' : ''} ${myTimelineCountLoading ? 'loading' : ''}`}
onClick={openCurrentUserTimeline}
disabled={!resolvedCurrentUserContact}
title={resolvedCurrentUserContact
? `打开${resolvedCurrentUserContact.displayName || '我'}的朋友圈详情`
: '未在右侧联系人列表中匹配到当前账号'}
>
<span className="feed-my-timeline-label"></span>
<span className="feed-my-timeline-count">
{myTimelineCount !== null
? `${myTimelineCount.toLocaleString('zh-CN')}`
: myTimelineCountLoading
? <Loader2 size={14} className="spin" aria-hidden="true" />
: '--'}
</span>
</button>
</div>
<div className={`feed-stats-line feed-stats-range ${overviewStatsStatus}`}>
{renderOverviewRangeText()}
</div>
</div>
<div className="header-actions">