leemuzi/real-time-fund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：调整顶部导航栏图标

Browse Source
This commit is contained in:
hzm
2026-02-16 10:57:50 +08:00
parent 9b7a1c5a37
commit 6caf246010
2 changed files with 63 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/globals.css
View File

@@ -181,7 +181,17 @@ body {
@media (max-width: 640px) {
/* Default: Search hidden, Trigger visible */
.navbar-add-fund {
display: none;
display: flex;
width: 0 !important;
min-width: 0 !important;
flex: 0 0 0 !important;
opacity: 0;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
border: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.mobile-search-btn {
@@ -189,20 +199,51 @@ body {
}
/* When search focused/active */
.brand {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
transform: translateX(0);
width: auto;
white-space: nowrap;
}
.brand.search-focused-sibling {
display: none !important;
width: 0 !important;
opacity: 0;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
transform: translateX(-20px);
pointer-events: none;
}
.actions {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
transform: translateX(0);
width: auto;
white-space: nowrap;
}
.actions.search-focused-sibling {
display: none !important;
width: 0 !important;
opacity: 0;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
transform: translateX(20px);
pointer-events: none;
}
.navbar-add-fund.search-focused {
display: flex !important;
max-width: 100% !important;
width: 100% !important;
flex: 1;
flex: 1 !important;
margin-top: 0 !important;
opacity: 1;
pointer-events: auto;
overflow: visible !important;
}
}

30
app/page.jsx
View File

@@ -10,7 +10,6 @@ import timezone from 'dayjs/plugin/timezone';
import Announcement from "./components/Announcement";
import { DatePicker, DonateTabs, NumericInput, Stat } from "./components/Common";
import { ChevronIcon, CloseIcon, CloudIcon, DragIcon, ExitIcon, EyeIcon, EyeOffIcon, GridIcon, ListIcon, LoginIcon, LogoutIcon, MailIcon, PinIcon, PinOffIcon, PlusIcon, RefreshIcon, SettingsIcon, SortIcon, StarIcon, TrashIcon, UpdateIcon, UserIcon } from "./components/Icons";
import githubImg from "./assets/github.svg";
import weChatGroupImg from "./assets/weChatGroup.png";
import { supabase, isSupabaseConfigured } from './lib/supabase';
import { fetchFundData, fetchLatestRelease, fetchShanghaiIndexDate, fetchSmartFundNetValue, searchFunds, submitFeedback } from './api/fund';
@@ -3109,6 +3108,7 @@ export default function HomePage() {
setSearchTerm('');
setSelectedFunds([]);
setShowDropdown(false);
setIsSearchFocused(false);
if (failures.length > 0) {
setAddFailures(failures);
setAddResultOpen(true);
@@ -3747,7 +3747,7 @@ export default function HomePage() {
initial={{ opacity: 0, width: 0, marginLeft: 0 }}
animate={{ opacity: 1, width: 'auto', marginLeft: 8 }}
exit={{ opacity: 0, width: 0, marginLeft: 0 }}
style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}
style={{ display: 'flex', alignItems: 'center', overflow: 'hidden', height: 24 }}
title="正在同步到云端..."
>
<motion.svg
@@ -3772,17 +3772,8 @@ export default function HomePage() {
</div>
<div className={`glass add-fund-section navbar-add-fund ${(isSearchFocused || selectedFunds.length > 0) ? 'search-focused' : ''}`} role="region" aria-label="添加基金">
<div className="search-container" ref={dropdownRef}>
<form className="form" onSubmit={addFund}>
<div className="search-input-wrapper" style={{ flex: 1, gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
<span className="navbar-search-icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
<path d="M16.5 16.5L21 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
</svg>
</span>
<div className="input navbar-input-shell">
{selectedFunds.length > 0 && (
<div className="selected-inline-chips">
<div className="selected-inline-chips" style={{ marginBottom: 8, marginLeft: 0 }}>
{selectedFunds.map(fund => (
<div key={fund.CODE} className="fund-chip">
<span>{fund.NAME}</span>
@@ -3793,6 +3784,15 @@ export default function HomePage() {
))}
</div>
)}
<form className="form" onSubmit={addFund}>
<div className="search-input-wrapper" style={{ flex: 1, gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
<span className="navbar-search-icon" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
<circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
<path d="M16.5 16.5L21 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
</svg>
</span>
<div className="input navbar-input-shell">
<input
ref={inputRef}
className="navbar-input-field"
@@ -3803,7 +3803,10 @@ export default function HomePage() {
setShowDropdown(true);
setIsSearchFocused(true);
}}
onBlur={() => setIsSearchFocused(false)}
onBlur={() => {
// 延迟关闭，以允许点击搜索结果
setTimeout(() => setIsSearchFocused(false), 200);
}}
/>
</div>
{isSearching && <div className="search-spinner" />}
@@ -3883,7 +3886,6 @@ export default function HomePage() {
<UpdateIcon width="14" height="14" />
</div>
)}
<img alt="项目Github地址" src={githubImg.src} style={{ width: '30px', height: '30px', cursor: 'pointer' }} onClick={() => window.open("https://github.com/hzm0321/real-time-fund")} />
{isMobile && (
<button
className="icon-button mobile-search-btn"