hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 15:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(sns): compact jump date filter row

Browse Source
This commit is contained in:
aits2026
2026-03-06 15:32:13 +08:00
parent 03f65317a9
commit e92983dd80
2 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Sns/SnsFilterPanel.tsx
View File

@@ -123,38 +123,40 @@ export const SnsFilterPanel: React.FC<SnsFilterPanelProps> = ({
{/* Date Widget */}
<div className="filter-widget date-widget">
<div className="widget-header">
<Calendar size={14} />
<span>时间跳转</span>
</div>
<div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
<button
className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
onClick={() => setShowJumpPopover(prev => !prev)}
>
<span className="date-text">
{jumpTargetDate
? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
: '选择日期...'}
</span>
{jumpTargetDate && (
<div
className="clear-date-btn"
onClick={(e) => {
e.stopPropagation()
setJumpTargetDate(undefined)
}}
>
<X size={12} />
</div>
)}
</button>
<JumpToDatePopover
isOpen={showJumpPopover}
currentDate={jumpTargetDate || new Date()}
onClose={() => setShowJumpPopover(false)}
onSelect={(date) => setJumpTargetDate(date)}
/>
<div className="date-widget-row">
<div className="widget-header">
<Calendar size={14} />
<span>时间跳转</span>
</div>
<div className="jump-calendar-anchor" ref={jumpCalendarWrapRef}>
<button
className={`date-picker-trigger ${jumpTargetDate ? 'active' : ''}`}
onClick={() => setShowJumpPopover(prev => !prev)}
>
<span className="date-text">
{jumpTargetDate
? jumpTargetDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
: '选择日期...'}
</span>
{jumpTargetDate && (
<div
className="clear-date-btn"
onClick={(e) => {
e.stopPropagation()
setJumpTargetDate(undefined)
}}
>
<X size={12} />
</div>
)}
</button>
<JumpToDatePopover
isOpen={showJumpPopover}
currentDate={jumpTargetDate || new Date()}
onClose={() => setShowJumpPopover(false)}
onSelect={(date) => setJumpTargetDate(date)}
/>
</div>
</div>
</div>

15
src/pages/SnsPage.scss
View File

@@ -1063,10 +1063,25 @@
}
/* Date Widget */
.date-widget-row {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.date-widget .widget-header {
margin-bottom: 0;
flex-shrink: 0;
min-width: 72px;
}
.jump-calendar-anchor {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 0;
isolation: isolate;
z-index: 20;