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

15
src/pages/SnsPage.scss
View File

@@ -1063,10 +1063,25 @@
} }
/* Date Widget */ /* 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 { .jump-calendar-anchor {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1;
min-width: 0;
isolation: isolate; isolation: isolate;
z-index: 20; z-index: 20;