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-03-05 21:18:29 +08:00
parent 873728a6a2
commit c08c97d706
3 changed files with 184 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/components/ScanImportConfirmModal.jsx
View File

@@ -1,5 +1,6 @@
'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { CloseIcon } from './Icons';
@@ -9,8 +10,15 @@ export default function ScanImportConfirmModal({
onClose,
onToggle,
onConfirm,
refreshing
refreshing,
groups = []
}) {
const [selectedGroupId, setSelectedGroupId] = useState('all');
const handleConfirm = () => {
onConfirm(selectedGroupId);
};
return (
<motion.div
className="modal-overlay"
@@ -41,45 +49,62 @@ export default function ScanImportConfirmModal({
未识别到有效的基金代码，请尝试更清晰的截图或手动搜索。
</div>
) : (
<div className="search-results pending-list" style={{ maxHeight: 320, overflowY: 'auto' }}>
{scannedFunds.map((item) => {
const isSelected = selectedScannedCodes.has(item.code);
const isAlreadyAdded = item.status === 'added';
const isInvalid = item.status === 'invalid';
const isDisabled = isAlreadyAdded || isInvalid;
const displayName = item.name || (isInvalid ? '未找到基金' : '未知基金');
return (
<div
key={item.code}
className={`search-item ${isSelected ? 'selected' : ''} ${isAlreadyAdded ? 'added' : ''}`}
onMouseDown={(e) => e.preventDefault()}
onClick={() => {
if (isDisabled) return;
onToggle(item.code);
}}
style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
>
<div className="fund-info">
<span className="fund-name">{displayName}</span>
<span className="fund-code muted">#{item.code}</span>
</div>
{isAlreadyAdded ? (
<span className="added-label">已添加</span>
) : isInvalid ? (
<span className="added-label">未找到</span>
) : (
<div className="checkbox">
{isSelected && <div className="checked-mark" />}
<>
<div className="search-results pending-list" style={{ maxHeight: 320, overflowY: 'auto' }}>
{scannedFunds.map((item) => {
const isSelected = selectedScannedCodes.has(item.code);
const isAlreadyAdded = item.status === 'added';
const isInvalid = item.status === 'invalid';
const isDisabled = isAlreadyAdded || isInvalid;
const displayName = item.name || (isInvalid ? '未找到基金' : '未知基金');
return (
<div
key={item.code}
className={`search-item ${isSelected ? 'selected' : ''} ${isAlreadyAdded ? 'added' : ''}`}
onMouseDown={(e) => e.preventDefault()}
onClick={() => {
if (isDisabled) return;
onToggle(item.code);
}}
style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
>
<div className="fund-info">
<span className="fund-name">{displayName}</span>
<span className="fund-code muted">#{item.code}</span>
</div>
)}
</div>
);
})}
</div>
{isAlreadyAdded ? (
<span className="added-label">已添加</span>
) : isInvalid ? (
<span className="added-label">未找到</span>
) : (
<div className="checkbox">
{isSelected && <div className="checked-mark" />}
</div>
)}
</div>
);
})}
</div>
<div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
<span className="muted" style={{ fontSize: 13, whiteSpace: 'nowrap' }}>添加到分组：</span>
<select
className="select"
value={selectedGroupId}
onChange={(e) => setSelectedGroupId(e.target.value)}
style={{ flex: 1 }}
>
<option value="all">全部</option>
<option value="fav">自选</option>
{groups.filter(g => g.id !== 'all' && g.id !== 'fav').map(g => (
<option key={g.id} value={g.id}>{g.name}</option>
))}
</select>
</div>
</>
)}
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 }}>
<button className="button secondary" onClick={onClose}>取消</button>
<button className="button" onClick={onConfirm} disabled={selectedScannedCodes.size === 0 || refreshing}>确认导入</button>
<button className="button" onClick={handleConfirm} disabled={selectedScannedCodes.size === 0 || refreshing}>确认导入</button>
</div>
</motion.div>
</motion.div>