diff --git a/app/globals.css b/app/globals.css index bf22c87..1dbeeea 100644 --- a/app/globals.css +++ b/app/globals.css @@ -93,7 +93,7 @@ body { .navbar { position: fixed; - top: 16px; + top: 0; left: 16px; right: 16px; z-index: 50; @@ -177,6 +177,41 @@ body { height: auto; } +/* Mobile Search Logic */ +@media (max-width: 640px) { + /* Default: Search hidden, Trigger visible */ + .navbar-add-fund { + display: none; + } + + .mobile-search-btn { + display: inline-flex !important; + } + + /* When search focused/active */ + .brand.search-focused-sibling { + display: none !important; + } + + .actions.search-focused-sibling { + display: none !important; + } + + .navbar-add-fund.search-focused { + display: flex !important; + max-width: 100% !important; + width: 100% !important; + flex: 1; + margin-top: 0 !important; + } +} + +/* Desktop: Trigger hidden */ +.mobile-search-btn { + display: none; +} + + .navbar-input-field { flex: 1; min-width: 120px; @@ -198,7 +233,7 @@ body { } .content { - padding-top: 100px; + /*padding-top: 100px;*/ } @media (max-width: 640px) { @@ -766,7 +801,6 @@ input[type="number"] { .filter-bar { transition: all 0.3s ease; position: sticky; - top: 90px; z-index: 40; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px); diff --git a/app/page.jsx b/app/page.jsx index efe1025..0b31c93 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -1726,7 +1726,7 @@ function CountUp({ value, prefix = '', suffix = '', decimals = 2, className = '' ); } -function GroupSummary({ funds, holdings, groupName, getProfit }) { +function GroupSummary({ funds, holdings, groupName, getProfit, stickyTop }) { const [showPercent, setShowPercent] = useState(true); const [isMasked, setIsMasked] = useState(false); const [isSticky, setIsSticky] = useState(false); @@ -1791,7 +1791,7 @@ function GroupSummary({ funds, holdings, groupName, getProfit }) { if (!summary.hasHolding) return null; return ( -
+
{ - const updateNavbarHeight = () => { + const updateHeights = () => { if (navbarRef.current) { setNavbarHeight(navbarRef.current.offsetHeight); } + if (filterBarRef.current) { + setFilterBarHeight(filterBarRef.current.offsetHeight); + } }; - updateNavbarHeight(); - window.addEventListener('resize', updateNavbarHeight); - return () => window.removeEventListener('resize', updateNavbarHeight); - }, []); + // 初始延迟一下,确保渲染完成 + const timer = setTimeout(updateHeights, 100); + window.addEventListener('resize', updateHeights); + return () => { + window.removeEventListener('resize', updateHeights); + clearTimeout(timer); + }; + }, [groups, currentTab]); // groups 或 tab 变化可能导致 filterBar 高度变化 + const handleMobileSearchClick = () => { + setIsSearchFocused(true); + setTimeout(() => { + inputRef.current?.focus(); + }, 100); + }; + const [holdingModal, setHoldingModal] = useState({ open: false, fund: null }); const [actionModal, setActionModal] = useState({ open: false, fund: null }); const [tradeModal, setTradeModal] = useState({ open: false, fund: null, type: 'buy' }); // type: 'buy' | 'sell' @@ -3777,6 +3794,7 @@ export default function HomePage() {
)} e.preventDefault()} onClick={() => { if (isAlreadyAdded) return; toggleSelectFund(fund); @@ -3865,6 +3884,19 @@ export default function HomePage() {
)} 项目Github地址 window.open("https://github.com/hzm0321/real-time-fund")} /> + {isMobile && ( + + )}
刷新 {Math.round(refreshMs / 1000)}秒 @@ -3994,7 +4026,7 @@ export default function HomePage() {
-
+
{currentTab !== 'all' && currentTab !== 'fav' && (