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';
+ }}
+ >
+
+ 添加基金到此分组
+
+ )}
>
)}