diff --git a/app/components/AddFundToGroupModal.jsx b/app/components/AddFundToGroupModal.jsx index 260575d..b611e33 100644 --- a/app/components/AddFundToGroupModal.jsx +++ b/app/components/AddFundToGroupModal.jsx @@ -1,6 +1,7 @@ 'use client'; -import { useState } from 'react'; +import { useState, useMemo } from 'react'; +import { Search } from 'lucide-react'; import { CloseIcon, PlusIcon } from './Icons'; import { Dialog, @@ -10,8 +11,17 @@ import { export default function AddFundToGroupModal({ allFunds, currentGroupCodes, holdings = {}, onClose, onAdd }) { const [selected, setSelected] = useState(new Set()); + const [searchQuery, setSearchQuery] = useState(''); - const availableFunds = (allFunds || []).filter(f => !(currentGroupCodes || []).includes(f.code)); + const availableFunds = useMemo(() => { + const base = (allFunds || []).filter(f => !(currentGroupCodes || []).includes(f.code)); + if (!searchQuery.trim()) return base; + const query = searchQuery.trim().toLowerCase(); + return base.filter(f => + (f.name && f.name.toLowerCase().includes(query)) || + (f.code && f.code.includes(query)) + ); + }, [allFunds, currentGroupCodes, searchQuery]); const getHoldingAmount = (fund) => { const holding = holdings[fund?.code]; @@ -44,6 +54,22 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, holdi overlayClassName="modal-overlay" style={{ maxWidth: '500px', width: '90vw', zIndex: 99 }} > + 添加基金到分组
@@ -55,10 +81,45 @@ export default function AddFundToGroupModal({ allFunds, currentGroupCodes, holdi
-
+
+ + setSearchQuery(e.target.value)} + placeholder="搜索基金名称或编号" + style={{ + width: '100%', + paddingLeft: 36, + }} + /> +
+ +
{availableFunds.length === 0 ? (
-

所有基金已在该分组中

+

{searchQuery.trim() ? '未找到匹配的基金' : '所有基金已在该分组中'}

) : (
diff --git a/app/page.jsx b/app/page.jsx index d4225c5..53891d5 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -4248,45 +4248,6 @@ export default function HomePage() { navbarHeight={navbarHeight} /> - {currentTab !== 'all' && currentTab !== 'fav' && ( - setAddFundToGroupOpen(true)} - style={{ - width: '100%', - height: '48px', - border: '2px dashed var(--border)', - background: 'transparent', - borderRadius: '12px', - color: 'var(--muted)', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - gap: '8px', - marginBottom: '16px', - cursor: 'pointer', - transition: 'all 0.2s ease', - fontSize: '14px', - fontWeight: 500 - }} - onMouseEnter={(e) => { - e.currentTarget.style.borderColor = 'var(--primary)'; - e.currentTarget.style.color = 'var(--primary)'; - e.currentTarget.style.background = 'rgba(34, 211, 238, 0.05)'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.borderColor = 'var(--border)'; - e.currentTarget.style.color = 'var(--muted)'; - e.currentTarget.style.background = 'transparent'; - }} - > - - 添加基金到此分组 - - )} - + + {currentTab !== 'all' && currentTab !== 'fav' && ( + setAddFundToGroupOpen(true)} + style={{ + width: '100%', + height: '48px', + border: '2px dashed var(--border)', + background: 'transparent', + borderRadius: '12px', + color: 'var(--muted)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '8px', + marginTop: '16px', + cursor: 'pointer', + transition: 'all 0.2s ease', + fontSize: '14px', + fontWeight: 500 + }} + onMouseEnter={(e) => { + e.currentTarget.style.borderColor = 'var(--primary)'; + e.currentTarget.style.color = 'var(--primary)'; + e.currentTarget.style.background = 'rgba(34, 211, 238, 0.05)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.borderColor = 'var(--border)'; + e.currentTarget.style.color = 'var(--muted)'; + e.currentTarget.style.background = 'transparent'; + }} + > + + 添加基金到此分组 + + )} )}