hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-24 23:06:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(sns): show selected jump date in header

Browse Source
This commit is contained in:
aits2026
2026-03-06 15:51:03 +08:00
parent af2fe91f81
commit 9575ba2a9f
2 changed files with 74 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/SnsPage.scss
View File

@@ -210,6 +210,50 @@
animation: spin 0.8s linear infinite;
}
}
.jump-date-chip {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border-color);
border-radius: var(--sns-border-radius-sm);
background: var(--bg-tertiary);
color: var(--text-secondary);
padding: 8px 10px;
cursor: pointer;
transition: all 0.2s;
&:hover {
background: var(--hover-bg);
color: var(--primary);
}
&.active {
border-color: var(--primary);
background: rgba(var(--primary-rgb), 0.08);
color: var(--primary);
}
}
.jump-date-chip-label {
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.jump-date-chip-clear {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
border-radius: 999px;
padding: 1px;
&:hover {
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
}
}
.sns-posts-scroll {

30
src/pages/SnsPage.tsx
View File

@@ -1093,7 +1093,7 @@ export default function SnsPage() {
<div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
<button
type="button"
className={`icon-btn ${showJumpPopover ? 'active' : ''}`}
className={`${jumpTargetDate ? 'jump-date-chip' : 'icon-btn'} ${showJumpPopover ? 'active' : ''}`}
title={jumpTargetDate
? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
: '时间跳转'}
@@ -1106,7 +1106,35 @@ export default function SnsPage() {
setShowJumpPopover(prev => !prev)
}}
>
{jumpTargetDate ? (
<>
<span className="jump-date-chip-label">
{`${jumpTargetDate.getFullYear()}-${String(jumpTargetDate.getMonth() + 1).padStart(2, '0')}-${String(jumpTargetDate.getDate()).padStart(2, '0')}`}
</span>
<span
className="jump-date-chip-clear"
role="button"
tabIndex={0}
onClick={(event) => {
event.stopPropagation()
setJumpTargetDate(undefined)
setShowJumpPopover(false)
}}
onKeyDown={(event) => {
if (event.key !== 'Enter' && event.key !== ' ') return
event.preventDefault()
event.stopPropagation()
setJumpTargetDate(undefined)
setShowJumpPopover(false)
}}
aria-label="清除日期跳转"
>
<X size={14} />
</span>
</>
) : (
<Calendar size={20} />
)}
</button>
<JumpToDatePopover
isOpen={showJumpPopover}