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-08 14:52:55 +08:00
parent 354936c9af
commit e97de8744a
15 changed files with 1885 additions and 815 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/components/ConfirmModal.jsx
View File

@@ -1,59 +1,55 @@
'use client';
import { motion } from 'framer-motion';
import { createPortal } from 'react-dom';
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { TrashIcon } from './Icons';
export default function ConfirmModal({ title, message, onConfirm, onCancel, confirmText = "确定删除" }) {
const content = (
<motion.div
className="modal-overlay"
role="dialog"
aria-modal="true"
onClick={(e) => {
e.stopPropagation();
onCancel();
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
style={{ zIndex: 10002 }}
>
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 20 }}
className="glass card modal"
style={{ maxWidth: '400px' }}
onClick={(e) => e.stopPropagation()}
export default function ConfirmModal({
title,
message,
onConfirm,
onCancel,
confirmText = '确定删除',
}) {
const handleOpenChange = (open) => {
if (!open) onCancel();
};
return (
<Dialog open onOpenChange={handleOpenChange}>
<DialogContent
showCloseButton={false}
className="max-w-[400px] flex flex-col gap-5 p-6"
>
<div className="title" style={{ marginBottom: 12 }}>
<TrashIcon width="20" height="20" className="danger" />
<span>{title}</span>
</div>
<p className="muted" style={{ marginBottom: 24, fontSize: '14px', lineHeight: '1.6' }}>
<DialogHeader className="flex flex-row items-center gap-3 text-left">
<TrashIcon width="20" height="20" className="shrink-0 text-[var(--danger)]" />
<DialogTitle className="flex-1 text-base font-semibold">{title}</DialogTitle>
</DialogHeader>
<DialogDescription className="text-left text-sm leading-relaxed text-[var(--muted-foreground)]">
{message}
</p>
<div className="row" style={{ gap: 12 }}>
</DialogDescription>
<div className="flex flex-col gap-3 sm:flex-row">
<button
className="button secondary"
type="button"
className="button secondary min-w-0 flex-1 cursor-pointer h-auto min-h-[48px] py-3 sm:h-11 sm:min-h-0 sm:py-0"
onClick={onCancel}
style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'var(--text)' }}
>
取消
</button>
<button
className="button danger"
type="button"
className="button danger min-w-0 flex-1 cursor-pointer h-auto min-h-[48px] py-3 sm:h-11 sm:min-h-0 sm:py-0"
onClick={onConfirm}
style={{ flex: 1 }}
autoFocus
>
{confirmText}
</button>
</div>
</motion.div>
</motion.div>
</DialogContent>
</Dialog>
);
if (typeof document === 'undefined') return null;
return createPortal(content, document.body);
}

33
app/components/EmptyStateCard.jsx Normal file
View File

@@ -0,0 +1,33 @@
'use client';
export default function EmptyStateCard({
fundsLength = 0,
currentTab = 'all',
onAddToGroup,
}) {
const isEmpty = fundsLength === 0;
const isGroupTab = currentTab !== 'all' && currentTab !== 'fav';
return (
<div
className="glass card empty"
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
padding: '60px 20px',
}}
>
<div style={{ fontSize: '48px', marginBottom: 16, opacity: 0.5 }}>📂</div>
<div className="muted" style={{ marginBottom: 20 }}>
{isEmpty ? '尚未添加基金' : '该分组下暂无数据'}
</div>
{isGroupTab && fundsLength > 0 && (
<button className="button" onClick={onAddToGroup}>
添加基金到此分组
</button>
)}
</div>
);
}

459
app/components/FundCard.jsx Normal file
View File

@@ -0,0 +1,459 @@
'use client';
import { motion, AnimatePresence } from 'framer-motion';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import { isNumber, isString } from 'lodash';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Stat } from './Common';
import FundTrendChart from './FundTrendChart';
import FundIntradayChart from './FundIntradayChart';
import {
ChevronIcon,
ExitIcon,
SettingsIcon,
StarIcon,
SwitchIcon,
TrashIcon,
} from './Icons';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(isSameOrAfter);
const DEFAULT_TZ = 'Asia/Shanghai';
const getBrowserTimeZone = () => {
if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) {
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
return tz || DEFAULT_TZ;
}
return DEFAULT_TZ;
};
const TZ = getBrowserTimeZone();
const toTz = (input) => (input ? dayjs.tz(input, TZ) : dayjs().tz(TZ));
export default function FundCard({
fund: f,
todayStr,
currentTab,
favorites,
dcaPlans,
holdings,
percentModes,
valuationSeries,
collapsedCodes,
collapsedTrends,
transactions,
theme,
isTradingDay,
refreshing,
getHoldingProfit,
onRemoveFromGroup,
onToggleFavorite,
onRemoveFund,
onHoldingClick,
onActionClick,
onPercentModeToggle,
onToggleCollapse,
onToggleTrendCollapse,
layoutMode = 'card', // 'card' | 'drawer'，drawer 时前10重仓与业绩走势以 Tabs 展示
}) {
const holding = holdings[f?.code];
const profit = getHoldingProfit?.(f, holding) ?? null;
const hasHoldings = f.holdingsIsLastQuarter && Array.isArray(f.holdings) && f.holdings.length > 0;
const style = layoutMode === 'drawer' ? { border: 'none', boxShadow: 'none' } : {};
return (
<motion.div
className="glass card"
style={{
position: 'relative',
zIndex: 1,
...style,
}}
>
<div className="row" style={{ marginBottom: 10 }}>
<div className="title">
{currentTab !== 'all' && currentTab !== 'fav' ? (
<button
className="icon-button fav-button"
onClick={(e) => {
e.stopPropagation();
onRemoveFromGroup?.(f.code);
}}
title="从当前分组移除"
>
<ExitIcon width="18" height="18" style={{ transform: 'rotate(180deg)' }} />
</button>
) : (
<button
className={`icon-button fav-button ${favorites?.has(f.code) ? 'active' : ''}`}
onClick={(e) => {
e.stopPropagation();
onToggleFavorite?.(f.code);
}}
title={favorites?.has(f.code) ? '取消自选' : '添加自选'}
>
<StarIcon width="18" height="18" filled={favorites?.has(f.code)} />
</button>
)}
<div className="title-text">
<span
className="name-text"
title={f.jzrq === todayStr ? '今日净值已更新' : ''}
>
{f.name}
</span>
<span className="muted">
#{f.code}
{dcaPlans?.[f.code]?.enabled === true && <span className="dca-indicator">定</span>}
{f.jzrq === todayStr && <span className="updated-indicator">✓</span>}
</span>
</div>
</div>
<div className="actions">
<div className="badge-v">
<span>{f.noValuation ? '净值日期' : '估值时间'}</span>
<strong>{f.noValuation ? (f.jzrq || '-') : (f.gztime || f.time || '-')}</strong>
</div>
<div className="row" style={{ gap: 4 }}>
<button
className="icon-button danger"
onClick={() => !refreshing && onRemoveFund?.(f)}
title="删除"
disabled={refreshing}
style={{
width: '28px',
height: '28px',
opacity: refreshing ? 0.6 : 1,
cursor: refreshing ? 'not-allowed' : 'pointer',
}}
>
<TrashIcon width="14" height="14" />
</button>
</div>
</div>
</div>
<div className="row" style={{ marginBottom: 12 }}>
<Stat label="单位净值" value={f.dwjz ?? '—'} />
{f.noValuation ? (
<Stat
label="涨跌幅"
value={
f.zzl !== undefined && f.zzl !== null
? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%`
: '—'
}
delta={f.zzl}
/>
) : (
<>
{(() => {
const hasTodayData = f.jzrq === todayStr;
let isYesterdayChange = false;
let isPreviousTradingDay = false;
if (!hasTodayData && isString(f.jzrq)) {
const today = toTz(todayStr).startOf('day');
const jzDate = toTz(f.jzrq).startOf('day');
const yesterday = today.clone().subtract(1, 'day');
if (jzDate.isSame(yesterday, 'day')) {
isYesterdayChange = true;
} else if (jzDate.isBefore(yesterday, 'day')) {
isPreviousTradingDay = true;
}
}
const shouldHideChange =
isTradingDay && !hasTodayData && !isYesterdayChange && !isPreviousTradingDay;
if (shouldHideChange) return null;
const changeLabel = hasTodayData ? '涨跌幅' : '昨日涨幅';
return (
<Stat
label={changeLabel}
value={
f.zzl !== undefined
? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%`
: ''
}
delta={f.zzl}
/>
);
})()}
<Stat
label="估值净值"
value={
f.estPricedCoverage > 0.05 ? f.estGsz.toFixed(4) : (f.gsz ?? '—')
}
/>
<Stat
label="估值涨幅"
value={
f.estPricedCoverage > 0.05
? `${f.estGszzl > 0 ? '+' : ''}${f.estGszzl.toFixed(2)}%`
: isNumber(f.gszzl)
? `${f.gszzl > 0 ? '+' : ''}${f.gszzl.toFixed(2)}%`
: f.gszzl ?? '—'
}
delta={f.estPricedCoverage > 0.05 ? f.estGszzl : Number(f.gszzl) || 0}
/>
</>
)}
</div>
<div className="row" style={{ marginBottom: 12 }}>
{!profit ? (
<div
className="stat"
style={{ flexDirection: 'column', gap: 4 }}
>
<span className="label">持仓金额</span>
<div
className="value muted"
style={{
fontSize: '14px',
display: 'flex',
alignItems: 'center',
gap: 4,
cursor: 'pointer',
}}
onClick={() => onHoldingClick?.(f)}
>
未设置 <SettingsIcon width="12" height="12" />
</div>
</div>
) : (
<>
<div
className="stat"
style={{ cursor: 'pointer', flexDirection: 'column', gap: 4 }}
onClick={() => onActionClick?.(f)}
>
<span
className="label"
style={{ display: 'flex', alignItems: 'center', gap: 4 }}
>
持仓金额 <SettingsIcon width="12" height="12" style={{ opacity: 0.7 }} />
</span>
<span className="value">¥{profit.amount.toFixed(2)}</span>
</div>
<div className="stat" style={{ flexDirection: 'column', gap: 4 }}>
<span className="label">当日收益</span>
<span
className={`value ${
profit.profitToday != null
? profit.profitToday > 0
? 'up'
: profit.profitToday < 0
? 'down'
: ''
: 'muted'
}`}
>
{profit.profitToday != null
? `${profit.profitToday > 0 ? '+' : profit.profitToday < 0 ? '-' : ''}¥${Math.abs(profit.profitToday).toFixed(2)}`
: '--'}
</span>
</div>
{profit.profitTotal !== null && (
<div
className="stat"
onClick={(e) => {
e.stopPropagation();
onPercentModeToggle?.(f.code);
}}
style={{ cursor: 'pointer', flexDirection: 'column', gap: 4 }}
title="点击切换金额/百分比"
>
<span
className="label"
style={{ display: 'flex', alignItems: 'center', gap: 1 }}
>
持有收益{percentModes?.[f.code] ? '(%)' : ''}
<SwitchIcon />
</span>
<span
className={`value ${
profit.profitTotal > 0 ? 'up' : profit.profitTotal < 0 ? 'down' : ''
}`}
>
{profit.profitTotal > 0 ? '+' : profit.profitTotal < 0 ? '-' : ''}
{percentModes?.[f.code]
? `${Math.abs(
holding?.cost * holding?.share
? (profit.profitTotal / (holding.cost * holding.share)) * 100
: 0,
).toFixed(2)}%`
: `¥${Math.abs(profit.profitTotal).toFixed(2)}`}
</span>
</div>
)}
</>
)}
</div>
{f.estPricedCoverage > 0.05 && (
<div
style={{
fontSize: '10px',
color: 'var(--muted)',
marginTop: -8,
marginBottom: 10,
textAlign: 'right',
}}
>
基于 {Math.round(f.estPricedCoverage * 100)}% 持仓估算
</div>
)}
{(() => {
const showIntraday =
Array.isArray(valuationSeries?.[f.code]) && valuationSeries[f.code].length >= 2;
if (!showIntraday) return null;
if (
f.gztime &&
toTz(todayStr).startOf('day').isAfter(toTz(f.gztime).startOf('day'))
) {
return null;
}
if (
f.jzrq &&
f.gztime &&
toTz(f.jzrq).startOf('day').isSameOrAfter(toTz(f.gztime).startOf('day'))
) {
return null;
}
return (
<FundIntradayChart
key={`${f.code}-intraday-${theme}`}
series={valuationSeries[f.code]}
referenceNav={f.dwjz != null ? Number(f.dwjz) : undefined}
theme={theme}
/>
);
})()}
{layoutMode === 'drawer' ? (
<Tabs defaultValue={hasHoldings ? 'holdings' : 'trend'} className="w-full">
<TabsList className={`w-full ${hasHoldings ? 'grid grid-cols-2' : ''}`}>
{hasHoldings && (
<TabsTrigger value="holdings">前10重仓股票</TabsTrigger>
)}
<TabsTrigger value="trend">业绩走势</TabsTrigger>
</TabsList>
{hasHoldings && (
<TabsContent value="holdings" className="mt-3 outline-none">
<div className="list">
{f.holdings.map((h, idx) => (
<div className="item" key={idx}>
<span className="name">{h.name}</span>
<div className="values">
{isNumber(h.change) && (
<span
className={`badge ${h.change > 0 ? 'up' : h.change < 0 ? 'down' : ''}`}
style={{ marginRight: 8 }}
>
{h.change > 0 ? '+' : ''}
{h.change.toFixed(2)}%
</span>
)}
<span className="weight">{h.weight}</span>
</div>
</div>
))}
</div>
</TabsContent>
)}
<TabsContent value="trend" className="mt-3 outline-none">
<FundTrendChart
key={`${f.code}-${theme}`}
code={f.code}
isExpanded
onToggleExpand={() => onToggleTrendCollapse?.(f.code)}
transactions={transactions?.[f.code] || []}
theme={theme}
hideHeader
/>
</TabsContent>
</Tabs>
) : (
<>
{hasHoldings && (
<>
<div
style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
className="title"
onClick={() => onToggleCollapse?.(f.code)}
>
<div className="row" style={{ width: '100%', flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>前10重仓股票</span>
<ChevronIcon
width="16"
height="16"
className="muted"
style={{
transform: collapsedCodes?.has(f.code)
? 'rotate(-90deg)'
: 'rotate(0deg)',
transition: 'transform 0.2s ease',
}}
/>
</div>
<span className="muted">涨跌幅 / 占比</span>
</div>
</div>
<AnimatePresence>
{!collapsedCodes?.has(f.code) && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
style={{ overflow: 'hidden' }}
>
<div className="list">
{f.holdings.map((h, idx) => (
<div className="item" key={idx}>
<span className="name">{h.name}</span>
<div className="values">
{isNumber(h.change) && (
<span
className={`badge ${h.change > 0 ? 'up' : h.change < 0 ? 'down' : ''}`}
style={{ marginRight: 8 }}
>
{h.change > 0 ? '+' : ''}
{h.change.toFixed(2)}%
</span>
)}
<span className="weight">{h.weight}</span>
</div>
</div>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</>
)}
<FundTrendChart
key={`${f.code}-${theme}`}
code={f.code}
isExpanded={!collapsedTrends?.has(f.code)}
onToggleExpand={() => onToggleTrendCollapse?.(f.code)}
transactions={transactions?.[f.code] || []}
theme={theme}
/>
</>
)}
</motion.div>
);
}

157
app/components/FundTrendChart.jsx
View File

@@ -54,7 +54,7 @@ function getChartThemeColors(theme) {
return CHART_COLORS[theme] || CHART_COLORS.dark;
}
export default function FundTrendChart({ code, isExpanded, onToggleExpand, transactions = [], theme = 'dark' }) {
export default function FundTrendChart({ code, isExpanded, onToggleExpand, transactions = [], theme = 'dark', hideHeader = false }) {
const [range, setRange] = useState('1m');
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
@@ -490,79 +490,102 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
}];
}, [theme]); // theme 变化时重算以应用亮色/暗色坐标轴与 crosshair
return (
<div style={{ marginTop: 16 }} onClick={(e) => e.stopPropagation()}>
<div
style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
className="title"
onClick={onToggleExpand}
>
<div className="row" style={{ width: '100%', flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>业绩走势</span>
<ChevronIcon
width="16"
height="16"
className="muted"
style={{
transform: !isExpanded ? 'rotate(-90deg)' : 'rotate(0deg)',
transition: 'transform 0.2s ease'
}}
/>
const chartBlock = (
<>
<div style={{ position: 'relative', height: 180, width: '100%', touchAction: 'pan-y' }}>
{loading && (
<div className="chart-overlay" style={{ backdropFilter: 'blur(2px)' }}>
<span className="muted" style={{ fontSize: '12px' }}>加载中...</span>
</div>
{data.length > 0 && (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
<span style={{ color: lineColor, fontWeight: 600 }}>
{change > 0 ? '+' : ''}{change.toFixed(2)}%
</span>
</div>
)}
</div>
)}
{!loading && data.length === 0 && (
<div className="chart-overlay">
<span className="muted" style={{ fontSize: '12px' }}>暂无数据</span>
</div>
)}
{data.length > 0 && (
<Line ref={chartRef} data={chartData} options={options} plugins={plugins} />
)}
</div>
<AnimatePresence>
{isExpanded && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
style={{ overflow: 'hidden' }}
<div className="trend-range-bar">
{ranges.map(r => (
<button
key={r.value}
type="button"
className={`trend-range-btn ${range === r.value ? 'active' : ''}`}
onClick={(e) => { e.stopPropagation(); setRange(r.value); }}
>
<div style={{ position: 'relative', height: 180, width: '100%', touchAction: 'pan-y' }}>
{loading && (
<div className="chart-overlay" style={{ backdropFilter: 'blur(2px)' }}>
<span className="muted" style={{ fontSize: '12px' }}>加载中...</span>
</div>
)}
{r.label}
</button>
))}
</div>
</>
);
{!loading && data.length === 0 && (
<div className="chart-overlay">
<span className="muted" style={{ fontSize: '12px' }}>暂无数据</span>
</div>
)}
{data.length > 0 && (
<Line ref={chartRef} data={chartData} options={options} plugins={plugins} />
)}
return (
<div style={{ marginTop: hideHeader ? 0 : 16 }} onClick={(e) => e.stopPropagation()}>
{!hideHeader && (
<div
style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
className="title"
onClick={onToggleExpand}
>
<div className="row" style={{ width: '100%', flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>业绩走势</span>
<ChevronIcon
width="16"
height="16"
className="muted"
style={{
transform: !isExpanded ? 'rotate(-90deg)' : 'rotate(0deg)',
transition: 'transform 0.2s ease'
}}
/>
</div>
{data.length > 0 && (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
<span style={{ color: lineColor, fontWeight: 600 }}>
{change > 0 ? '+' : ''}{change.toFixed(2)}%
</span>
</div>
)}
</div>
</div>
)}
<div className="trend-range-bar">
{ranges.map(r => (
<button
key={r.value}
type="button"
className={`trend-range-btn ${range === r.value ? 'active' : ''}`}
onClick={(e) => { e.stopPropagation(); setRange(r.value); }}
>
{r.label}
</button>
))}
</div>
</motion.div>
)}
</AnimatePresence>
{hideHeader && data.length > 0 && (
<div className="row" style={{ marginBottom: 8, justifyContent: 'flex-end' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span className="muted">{ranges.find(r => r.value === range)?.label}涨跌幅</span>
<span style={{ color: lineColor, fontWeight: 600 }}>
{change > 0 ? '+' : ''}{change.toFixed(2)}%
</span>
</div>
</div>
)}
{hideHeader ? (
chartBlock
) : (
<AnimatePresence>
{isExpanded && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
style={{ overflow: 'hidden' }}
>
{chartBlock}
</motion.div>
)}
</AnimatePresence>
)}
</div>
);
}

332
app/components/GroupSummary.jsx Normal file
View File

@@ -0,0 +1,332 @@
'use client';
import { useEffect, useRef, useState, useMemo, useLayoutEffect } from 'react';
import { PinIcon, PinOffIcon, EyeIcon, EyeOffIcon, SwitchIcon } from './Icons';
// 数字滚动组件（初始化时无动画，后续变更再动画）
function CountUp({ value, prefix = '', suffix = '', decimals = 2, className = '', style = {} }) {
const [displayValue, setDisplayValue] = useState(value);
const previousValue = useRef(value);
const isFirstChange = useRef(true);
useEffect(() => {
if (previousValue.current === value) return;
if (isFirstChange.current) {
isFirstChange.current = false;
previousValue.current = value;
setDisplayValue(value);
return;
}
const start = previousValue.current;
const end = value;
const duration = 400;
const startTime = performance.now();
const animate = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const ease = 1 - Math.pow(1 - progress, 4);
const current = start + (end - start) * ease;
setDisplayValue(current);
if (progress < 1) {
requestAnimationFrame(animate);
} else {
previousValue.current = value;
}
};
requestAnimationFrame(animate);
}, [value]);
return (
<span className={className} style={style}>
{prefix}
{Math.abs(displayValue).toFixed(decimals)}
{suffix}
</span>
);
}
export default function GroupSummary({
funds,
holdings,
groupName,
getProfit,
stickyTop,
}) {
const [showPercent, setShowPercent] = useState(true);
const [isMasked, setIsMasked] = useState(false);
const [isSticky, setIsSticky] = useState(false);
const rowRef = useRef(null);
const [assetSize, setAssetSize] = useState(24);
const [metricSize, setMetricSize] = useState(18);
const [winW, setWinW] = useState(0);
useEffect(() => {
if (typeof window !== 'undefined') {
setWinW(window.innerWidth);
const onR = () => setWinW(window.innerWidth);
window.addEventListener('resize', onR);
return () => window.removeEventListener('resize', onR);
}
}, []);
const summary = useMemo(() => {
let totalAsset = 0;
let totalProfitToday = 0;
let totalHoldingReturn = 0;
let totalCost = 0;
let hasHolding = false;
let hasAnyTodayData = false;
funds.forEach((fund) => {
const holding = holdings[fund.code];
const profit = getProfit(fund, holding);
if (profit) {
hasHolding = true;
totalAsset += profit.amount;
if (profit.profitToday != null) {
totalProfitToday += Math.round(profit.profitToday * 100) / 100;
hasAnyTodayData = true;
}
if (profit.profitTotal !== null) {
totalHoldingReturn += profit.profitTotal;
if (holding && typeof holding.cost === 'number' && typeof holding.share === 'number') {
totalCost += holding.cost * holding.share;
}
}
}
});
const returnRate = totalCost > 0 ? (totalHoldingReturn / totalCost) * 100 : 0;
return {
totalAsset,
totalProfitToday,
totalHoldingReturn,
hasHolding,
returnRate,
hasAnyTodayData,
};
}, [funds, holdings, getProfit]);
useLayoutEffect(() => {
const el = rowRef.current;
if (!el) return;
const height = el.clientHeight;
const tooTall = height > 80;
if (tooTall) {
setAssetSize((s) => Math.max(16, s - 1));
setMetricSize((s) => Math.max(12, s - 1));
}
}, [
winW,
summary.totalAsset,
summary.totalProfitToday,
summary.totalHoldingReturn,
summary.returnRate,
showPercent,
assetSize,
metricSize,
]);
if (!summary.hasHolding) return null;
return (
<div
className={isSticky ? 'group-summary-sticky' : ''}
style={isSticky && stickyTop ? { top: stickyTop } : {}}
>
<div
className="glass card group-summary-card"
style={{
marginBottom: 8,
padding: '16px 20px',
background: 'rgba(255, 255, 255, 0.03)',
position: 'relative',
}}
>
<span
className="sticky-toggle-btn"
onClick={() => setIsSticky(!isSticky)}
style={{
position: 'absolute',
top: 4,
right: 4,
width: 24,
height: 24,
padding: 4,
opacity: 0.6,
zIndex: 10,
color: 'var(--muted)',
}}
>
{isSticky ? (
<PinIcon width="14" height="14" />
) : (
<PinOffIcon width="14" height="14" />
)}
</span>
<div
ref={rowRef}
className="row"
style={{ alignItems: 'flex-end', justifyContent: 'space-between' }}
>
<div>
<div
style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}
>
<div className="muted" style={{ fontSize: '12px' }}>
{groupName}
</div>
<button
className="fav-button"
onClick={() => setIsMasked((value) => !value)}
aria-label={isMasked ? '显示资产' : '隐藏资产'}
style={{
margin: 0,
padding: 2,
display: 'inline-flex',
alignItems: 'center',
}}
>
{isMasked ? (
<EyeOffIcon width="16" height="16" />
) : (
<EyeIcon width="16" height="16" />
)}
</button>
</div>
<div
style={{
fontSize: '24px',
fontWeight: 700,
fontFamily: 'var(--font-mono)',
}}
>
<span style={{ fontSize: '16px', marginRight: 2 }}>¥</span>
{isMasked ? (
<span
style={{ fontSize: assetSize, position: 'relative', top: 4 }}
>
******
</span>
) : (
<CountUp value={summary.totalAsset} style={{ fontSize: assetSize }} />
)}
</div>
</div>
<div style={{ display: 'flex', gap: 24 }}>
<div style={{ textAlign: 'right' }}>
<div
className="muted"
style={{ fontSize: '12px', marginBottom: 4 }}
>
当日收益
</div>
<div
className={
summary.hasAnyTodayData
? summary.totalProfitToday > 0
? 'up'
: summary.totalProfitToday < 0
? 'down'
: ''
: 'muted'
}
style={{
fontSize: '18px',
fontWeight: 700,
fontFamily: 'var(--font-mono)',
}}
>
{isMasked ? (
<span style={{ fontSize: metricSize }}>******</span>
) : summary.hasAnyTodayData ? (
<>
<span style={{ marginRight: 1 }}>
{summary.totalProfitToday > 0
? '+'
: summary.totalProfitToday < 0
? '-'
: ''}
</span>
<CountUp
value={Math.abs(summary.totalProfitToday)}
style={{ fontSize: metricSize }}
/>
</>
) : (
<span style={{ fontSize: metricSize }}>--</span>
)}
</div>
</div>
<div style={{ textAlign: 'right' }}>
<div
className="muted"
style={{
fontSize: '12px',
marginBottom: 4,
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
gap: 2,
}}
>
持有收益{showPercent ? '(%)' : ''}{' '}
<SwitchIcon style={{ opacity: 0.4 }} />
</div>
<div
className={
summary.totalHoldingReturn > 0
? 'up'
: summary.totalHoldingReturn < 0
? 'down'
: ''
}
style={{
fontSize: '18px',
fontWeight: 700,
fontFamily: 'var(--font-mono)',
cursor: 'pointer',
}}
onClick={() => setShowPercent(!showPercent)}
title="点击切换金额/百分比"
>
{isMasked ? (
<span style={{ fontSize: metricSize }}>******</span>
) : (
<>
<span style={{ marginRight: 1 }}>
{summary.totalHoldingReturn > 0
? '+'
: summary.totalHoldingReturn < 0
? '-'
: ''}
</span>
{showPercent ? (
<CountUp
value={Math.abs(summary.returnRate)}
suffix="%"
style={{ fontSize: metricSize }}
/>
) : (
<CountUp
value={Math.abs(summary.totalHoldingReturn)}
style={{ fontSize: metricSize }}
/>
)}
</>
)}
</div>
</div>
</div>
</div>
</div>
</div>
);
}

103
app/components/MobileFundTable.jsx
View File

@@ -24,9 +24,17 @@ import {
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { throttle } from 'lodash';
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerTitle,
} from '@/components/ui/drawer';
import FitText from './FitText';
import FundCard from './FundCard';
import MobileSettingModal from './MobileSettingModal';
import { ExitIcon, SettingsIcon, StarIcon } from './Icons';
import { CloseIcon, ExitIcon, SettingsIcon, StarIcon } from './Icons';
const MOBILE_NON_FROZEN_COLUMN_IDS = [
'yesterdayChangePercent',
@@ -95,6 +103,7 @@ function SortableRow({ row, children, isTableDragging, disabled }) {
* @param {boolean} [props.refreshing] - 是否刷新中
* @param {string} [props.sortBy] - 排序方式，'default' 时长按行触发拖拽排序
* @param {(oldIndex: number, newIndex: number) => void} [props.onReorder] - 拖拽排序回调
* @param {(row: any) => Object} [props.getFundCardProps] - 给定行返回 FundCard 的 props；传入后点击基金名称将用底部弹框展示卡片视图
*/
export default function MobileFundTable({
data = [],
@@ -110,6 +119,9 @@ export default function MobileFundTable({
onReorder,
onCustomSettingsChange,
stickyTop = 0,
getFundCardProps,
blockDrawerClose = false,
closeDrawerRef,
}) {
const sensors = useSensors(
useSensor(PointerSensor, {
@@ -119,11 +131,19 @@ export default function MobileFundTable({
);
const [activeId, setActiveId] = useState(null);
const ignoreNextDrawerCloseRef = useRef(false);
const onToggleFavoriteRef = useRef(onToggleFavorite);
const onRemoveFromGroupRef = useRef(onRemoveFromGroup);
const onHoldingAmountClickRef = useRef(onHoldingAmountClick);
useEffect(() => {
if (closeDrawerRef) {
closeDrawerRef.current = () => setCardSheetRow(null);
return () => { closeDrawerRef.current = null; };
}
}, [closeDrawerRef]);
useEffect(() => {
onToggleFavoriteRef.current = onToggleFavorite;
onRemoveFromGroupRef.current = onRemoveFromGroup;
@@ -277,6 +297,7 @@ export default function MobileFundTable({
};
const [settingModalOpen, setSettingModalOpen] = useState(false);
const [cardSheetRow, setCardSheetRow] = useState(null);
const tableContainerRef = useRef(null);
const portalHeaderRef = useRef(null);
const [tableContainerWidth, setTableContainerWidth] = useState(0);
@@ -420,8 +441,8 @@ export default function MobileFundTable({
setMobileColumnVisibility((prev = {}) => ({ ...prev, [columnId]: visible }));
};
// 移动端名称列：无拖拽把手，长按整行触发排序
const MobileFundNameCell = ({ info, showFullFundName }) => {
// 移动端名称列：无拖拽把手，长按整行触发排序；点击名称可打开底部卡片弹框（需传入 getFundCardProps）
const MobileFundNameCell = ({ info, showFullFundName, onOpenCardSheet }) => {
const original = info.row.original || {};
const code = original.code;
const isUpdated = original.isUpdated;
@@ -461,7 +482,22 @@ export default function MobileFundTable({
<div className="title-text">
<span
className={`name-text ${showFullFundName ? 'show-full' : ''}`}
title={isUpdated ? '今日净值已更新' : ''}
title={isUpdated ? '今日净值已更新' : onOpenCardSheet ? '点击查看卡片' : ''}
role={onOpenCardSheet ? 'button' : undefined}
tabIndex={onOpenCardSheet ? 0 : undefined}
style={onOpenCardSheet ? { cursor: 'pointer' } : undefined}
onClick={(e) => {
if (onOpenCardSheet) {
e.stopPropagation?.();
onOpenCardSheet(original);
}
}}
onKeyDown={(e) => {
if (onOpenCardSheet && (e.key === 'Enter' || e.key === ' ')) {
e.preventDefault();
onOpenCardSheet(original);
}
}}
>
{info.getValue() ?? '—'}
</span>
@@ -547,7 +583,13 @@ export default function MobileFundTable({
</button>
</div>
),
cell: (info) => <MobileFundNameCell info={info} showFullFundName={showFullFundName} />,
cell: (info) => (
<MobileFundNameCell
info={info}
showFullFundName={showFullFundName}
onOpenCardSheet={getFundCardProps ? (row) => setCardSheetRow(row) : undefined}
/>
),
meta: { align: 'left', cellClassName: 'name-cell', width: columnWidthMap.fundName },
},
{
@@ -703,7 +745,7 @@ export default function MobileFundTable({
meta: { align: 'right', cellClassName: 'holding-cell', width: columnWidthMap.holdingProfit },
},
],
[currentTab, favorites, refreshing, columnWidthMap, showFullFundName]
[currentTab, favorites, refreshing, columnWidthMap, showFullFundName, getFundCardProps]
);
const table = useReactTable({
@@ -953,6 +995,55 @@ export default function MobileFundTable({
/>
)}
<Drawer
open={!!(cardSheetRow && getFundCardProps)}
onOpenChange={(open) => {
if (!open) {
if (ignoreNextDrawerCloseRef.current) {
ignoreNextDrawerCloseRef.current = false;
return;
}
if (!blockDrawerClose) setCardSheetRow(null);
}
}}
>
<DrawerContent
className="h-[77vh] max-h-[88vh] mt-0 flex flex-col"
onPointerDownOutside={(e) => {
if (blockDrawerClose) return;
if (e?.target?.closest?.('[data-slot="dialog-content"], [role="dialog"]')) {
ignoreNextDrawerCloseRef.current = true;
return;
}
setCardSheetRow(null);
}}
>
<DrawerHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-5 pb-4 pt-2 text-left">
<DrawerTitle className="text-base font-semibold text-[var(--text)]">
基金详情
</DrawerTitle>
<DrawerClose asChild>
<button
type="button"
className="icon-button rounded-lg"
aria-label="关闭"
style={{ padding: 4, borderColor: 'transparent' }}
>
<CloseIcon width="24" height="24" />
</button>
</DrawerClose>
</DrawerHeader>
<div
className="flex-1 min-h-0 overflow-y-auto px-5 pb-8 pt-0"
style={{ paddingBottom: 'calc(24px + env(safe-area-inset-bottom, 0px))' }}
>
{cardSheetRow && getFundCardProps ? (
<FundCard {...getFundCardProps(cardSheetRow)} />
) : null}
</div>
</DrawerContent>
</Drawer>
{!onlyShowHeader && showPortalHeader && ReactDOM.createPortal(renderContent(true), document.body)}
</div>
);

362
app/components/MobileSettingModal.jsx
View File

@@ -1,13 +1,20 @@
'use client';
import { useEffect, useState } from 'react';
import { AnimatePresence, motion, Reorder } from 'framer-motion';
import { createPortal } from 'react-dom';
import { AnimatePresence, Reorder } from 'framer-motion';
import {
Drawer,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerClose,
} from '@/components/ui/drawer';
import { Switch } from '@/components/ui/switch';
import ConfirmModal from './ConfirmModal';
import { CloseIcon, DragIcon, ResetIcon, SettingsIcon } from './Icons';
/**
* 移动端表格个性化设置弹框（底部抽屉）
* 移动端表格个性化设置弹框（底部抽屉，基于 Drawer 组件）
* @param {Object} props
* @param {boolean} props.open - 是否打开
* @param {() => void} props.onClose - 关闭回调
@@ -38,226 +45,169 @@ export default function MobileSettingModal({
if (!open) setResetConfirmOpen(false);
}, [open]);
useEffect(() => {
if (open) {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = prev;
};
}
}, [open]);
const handleReorder = (newItems) => {
const newOrder = newItems.map((item) => item.id);
onColumnReorder?.(newOrder);
};
const content = (
<AnimatePresence>
{open && (
<motion.div
key="mobile-setting-overlay"
className="mobile-setting-overlay"
role="dialog"
aria-modal="true"
aria-label="个性化设置"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
onClick={onClose}
style={{ zIndex: 10001 }}
return (
<>
<Drawer
open={open}
onOpenChange={(v) => {
if (!v) onClose();
}}
direction="bottom"
>
<DrawerContent
className="glass"
defaultHeight="77vh"
minHeight="40vh"
maxHeight="90vh"
>
<motion.div
className="mobile-setting-drawer glass"
initial={{ y: '100%' }}
animate={{ y: 0 }}
exit={{ y: '100%' }}
transition={{ type: 'spring', damping: 30, stiffness: 300 }}
onClick={(e) => e.stopPropagation()}
>
<div className="mobile-setting-header">
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<SettingsIcon width="20" height="20" />
<span>个性化设置</span>
</div>
<button
className="icon-button"
onClick={onClose}
title="关闭"
style={{ border: 'none', background: 'transparent' }}
>
<CloseIcon width="20" height="20" />
</button>
</div>
<DrawerHeader className="mobile-setting-header flex-row items-center justify-between gap-2 py-5 pt-5 text-base font-semibold">
<DrawerTitle className="flex items-center gap-2.5 text-left">
<SettingsIcon width="20" height="20" />
<span>个性化设置</span>
</DrawerTitle>
<DrawerClose
className="icon-button border-none bg-transparent p-1"
title="关闭"
style={{ borderColor: 'transparent', backgroundColor: 'transparent' }}
>
<CloseIcon width="20" height="20" />
</DrawerClose>
</DrawerHeader>
<div className="mobile-setting-body">
{onToggleShowFullFundName && (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '12px 0',
borderBottom: '1px solid var(--border)',
marginBottom: 16,
}}
>
<span style={{ fontSize: '14px' }}>展示完整基金名称</span>
<button
type="button"
className="icon-button pc-table-column-switch"
onClick={(e) => {
e.stopPropagation();
onToggleShowFullFundName(!showFullFundName);
}}
title={showFullFundName ? '关闭' : '开启'}
style={{
border: 'none',
padding: '0 4px',
backgroundColor: 'transparent',
cursor: 'pointer',
flexShrink: 0,
display: 'flex',
alignItems: 'center',
}}
>
<span className={`dca-toggle-track ${showFullFundName ? 'enabled' : ''}`}>
<span
className="dca-toggle-thumb"
style={{ left: showFullFundName ? 16 : 2 }}
/>
</span>
</button>
</div>
)}
<h3 className="mobile-setting-subtitle">表头设置</h3>
<div className="mobile-setting-body flex flex-1 flex-col overflow-y-auto">
{onToggleShowFullFundName && (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 12,
gap: 8,
padding: '12px 0',
borderBottom: '1px solid var(--border)',
marginBottom: 16,
}}
>
<p className="muted" style={{ fontSize: '13px', margin: 0 }}>
拖拽调整列顺序
</p>
{(onResetColumnOrder || onResetColumnVisibility) && (
<button
className="icon-button"
onClick={() => setResetConfirmOpen(true)}
title="重置表头设置"
style={{
border: 'none',
width: '28px',
height: '28px',
backgroundColor: 'transparent',
color: 'var(--muted)',
flexShrink: 0,
}}
>
<ResetIcon width="16" height="16" />
</button>
)}
<span style={{ fontSize: '14px' }}>展示完整基金名称</span>
<Switch
checked={!!showFullFundName}
onCheckedChange={(checked) => {
onToggleShowFullFundName?.(!!checked);
}}
title={showFullFundName ? '关闭' : '开启'}
/>
</div>
{columns.length === 0 ? (
<div className="muted" style={{ textAlign: 'center', padding: '24px 0', fontSize: '14px' }}>
暂无可配置列
</div>
) : (
<Reorder.Group
axis="y"
values={columns}
onReorder={handleReorder}
className="mobile-setting-list"
)}
<h3 className="mobile-setting-subtitle">表头设置</h3>
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 12,
gap: 8,
}}
>
<p className="muted" style={{ fontSize: '13px', margin: 0 }}>
拖拽调整列顺序
</p>
{(onResetColumnOrder || onResetColumnVisibility) && (
<button
className="icon-button"
onClick={() => setResetConfirmOpen(true)}
title="重置表头设置"
style={{
border: 'none',
width: '28px',
height: '28px',
backgroundColor: 'transparent',
color: 'var(--muted)',
flexShrink: 0,
}}
>
<AnimatePresence mode="popLayout">
{columns.map((item, index) => (
<Reorder.Item
key={item.id || `col-${index}`}
value={item}
className="mobile-setting-item glass"
layout
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.98 }}
transition={{
type: 'spring',
stiffness: 500,
damping: 35,
mass: 1,
layout: { duration: 0.2 },
}}
>
<div
className="drag-handle"
style={{
cursor: 'grab',
display: 'flex',
alignItems: 'center',
padding: '0 8px',
color: 'var(--muted)',
}}
>
<DragIcon width="18" height="18" />
</div>
<span style={{ flex: 1, fontSize: '14px' }}>{item.header}</span>
{onToggleColumnVisibility && (
<button
type="button"
className="icon-button pc-table-column-switch"
onClick={(e) => {
e.stopPropagation();
onToggleColumnVisibility(item.id, columnVisibility?.[item.id] === false);
}}
title={columnVisibility?.[item.id] === false ? '显示' : '隐藏'}
style={{
border: 'none',
padding: '0 4px',
backgroundColor: 'transparent',
cursor: 'pointer',
flexShrink: 0,
display: 'flex',
alignItems: 'center',
}}
>
<span className={`dca-toggle-track ${columnVisibility?.[item.id] !== false ? 'enabled' : ''}`}>
<span
className="dca-toggle-thumb"
style={{ left: columnVisibility?.[item.id] !== false ? 16 : 2 }}
/>
</span>
</button>
)}
</Reorder.Item>
))}
</AnimatePresence>
</Reorder.Group>
<ResetIcon width="16" height="16" />
</button>
)}
</div>
</motion.div>
</motion.div>
)}
{resetConfirmOpen && (
<ConfirmModal
key="mobile-reset-confirm"
title="重置表头设置"
message="是否重置表头顺序和显示/隐藏为默认值？"
onConfirm={() => {
onResetColumnOrder?.();
onResetColumnVisibility?.();
setResetConfirmOpen(false);
}}
onCancel={() => setResetConfirmOpen(false)}
confirmText="重置"
/>
)}
</AnimatePresence>
);
{columns.length === 0 ? (
<div className="muted" style={{ textAlign: 'center', padding: '24px 0', fontSize: '14px' }}>
暂无可配置列
</div>
) : (
<Reorder.Group
axis="y"
values={columns}
onReorder={handleReorder}
className="mobile-setting-list"
>
<AnimatePresence mode="popLayout">
{columns.map((item, index) => (
<Reorder.Item
key={item.id || `col-${index}`}
value={item}
className="mobile-setting-item glass"
layout
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.98 }}
transition={{
type: 'spring',
stiffness: 500,
damping: 35,
mass: 1,
layout: { duration: 0.2 },
}}
>
<div
className="drag-handle"
style={{
cursor: 'grab',
display: 'flex',
alignItems: 'center',
padding: '0 8px',
color: 'var(--muted)',
}}
>
<DragIcon width="18" height="18" />
</div>
<span style={{ flex: 1, fontSize: '14px' }}>{item.header}</span>
{onToggleColumnVisibility && (
<Switch
checked={columnVisibility?.[item.id] !== false}
onCheckedChange={(checked) => {
onToggleColumnVisibility(item.id, !!checked);
}}
title={columnVisibility?.[item.id] === false ? '显示' : '隐藏'}
/>
)}
</Reorder.Item>
))}
</AnimatePresence>
</Reorder.Group>
)}
</div>
</DrawerContent>
</Drawer>
if (typeof document === 'undefined') return null;
return createPortal(content, document.body);
<AnimatePresence>
{resetConfirmOpen && (
<ConfirmModal
key="mobile-reset-confirm"
title="重置表头设置"
message="是否重置表头顺序和显示/隐藏为默认值？"
onConfirm={() => {
onResetColumnOrder?.();
onResetColumnVisibility?.();
setResetConfirmOpen(false);
}}
onCancel={() => setResetConfirmOpen(false)}
confirmText="重置"
/>
)}
</AnimatePresence>
</>
);
}

93
app/globals.css
View File

@@ -43,6 +43,13 @@
--sidebar-accent-foreground: #e5e7eb;
--sidebar-border: #1f2937;
--sidebar-ring: #22d3ee;
--drawer-overlay: rgba(2, 6, 23, 0.5);
--dialog-overlay: rgba(2, 6, 23, 0.6);
--tabs-list-bg: rgba(255, 255, 255, 0.04);
--tabs-list-border: transparent;
--tabs-trigger-active-bg: rgba(34, 211, 238, 0.12);
--tabs-trigger-active-text: var(--primary);
--switch-thumb: var(--foreground);
}
/* 亮色主题：ui-ux-pro-max 规范 - 正文 #0F172A、弱化 #475569、玻璃 bg-white/80+、边框可见 */
@@ -84,6 +91,13 @@
--sidebar-accent-foreground: #0f172a;
--sidebar-border: #e2e8f0;
--sidebar-ring: #0891b2;
--drawer-overlay: rgba(15, 23, 42, 0.25);
--dialog-overlay: rgba(15, 23, 42, 0.35);
--tabs-list-bg: rgba(0, 0, 0, 0.04);
--tabs-list-border: var(--border);
--tabs-trigger-active-bg: rgba(8, 145, 178, 0.15);
--tabs-trigger-active-text: var(--primary);
--switch-thumb: var(--background);
}
* {
@@ -2033,6 +2047,65 @@ input[type="number"] {
justify-content: center;
}
/* shadcn Drawer：符合项目规范，适配亮/暗主题 */
.drawer-shadow-bottom {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
}
.drawer-shadow-top {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .drawer-shadow-bottom {
box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .drawer-shadow-top {
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.12);
}
/* shadcn Dialog：符合项目规范(ui-ux-pro-max)，适配亮/暗主题，略微玻璃拟态 */
[data-slot="dialog-content"] {
background: rgba(17, 24, 39, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] [data-slot="dialog-content"] {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.dialog-content-shadow {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .dialog-content-shadow {
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}
[data-slot="dialog-content"] [data-slot="dialog-close"] {
cursor: pointer;
color: var(--muted-foreground);
transition: color 0.2s ease, opacity 0.2s ease;
}
[data-slot="dialog-content"] [data-slot="dialog-close"]:hover {
color: var(--foreground);
opacity: 1;
}
[data-slot="dialog-content"] [data-slot="dialog-close"]:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
[data-slot="dialog-title"] {
color: var(--foreground);
}
[data-slot="dialog-description"] {
color: var(--muted-foreground);
}
.mobile-setting-drawer {
width: 100%;
max-height: 90vh;
@@ -3192,6 +3265,26 @@ input[type="number"] {
box-shadow: none;
}
.button.danger {
background: linear-gradient(180deg, #ef4444, #f87171);
color: #2b0b0b;
border-color: rgba(248, 113, 113, 0.4);
}
.button.danger:hover {
box-shadow: 0 10px 20px rgba(248, 113, 113, 0.25);
}
[data-theme="light"] .button.danger {
background: linear-gradient(180deg, #ef4444, #dc2626);
color: #fff;
border-color: rgba(220, 38, 38, 0.4);
}
[data-theme="light"] .button.danger:hover {
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25);
}
/* ========== 移动端响应式 ========== */
@media (max-width: 640px) {

563
app/page.jsx
View File

@@ -13,13 +13,11 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import { isNumber, isString, isPlainObject } from 'lodash';
import { v4 as uuidv4 } from 'uuid';
import Announcement from "./components/Announcement";
import { Stat } from "./components/Common";
import FundTrendChart from "./components/FundTrendChart";
import FundIntradayChart from "./components/FundIntradayChart";
import EmptyStateCard from "./components/EmptyStateCard";
import FundCard from "./components/FundCard";
import GroupSummary from "./components/GroupSummary";
import {
ChevronIcon,
CloseIcon,
ExitIcon,
EyeIcon,
EyeOffIcon,
GridIcon,
@@ -32,13 +30,10 @@ import {
PlusIcon,
SettingsIcon,
SortIcon,
StarIcon,
SunIcon,
TrashIcon,
UpdateIcon,
UserIcon,
CameraIcon,
SwitchIcon
} from "./components/Icons";
import AddFundToGroupModal from "./components/AddFundToGroupModal";
import AddResultModal from "./components/AddResultModal";
@@ -116,214 +111,6 @@ function ScanButton({ onClick, disabled }) {
);
}
// 数字滚动组件（初始化时无动画，后续变更再动画）
function CountUp({ value, prefix = '', suffix = '', decimals = 2, className = '', style = {} }) {
const [displayValue, setDisplayValue] = useState(value);
const previousValue = useRef(value);
const isFirstChange = useRef(true);
useEffect(() => {
if (previousValue.current === value) return;
// 首次数值变化（包括从 0/默认值变为实际数据）不做动画，直接跳到目标值
if (isFirstChange.current) {
isFirstChange.current = false;
previousValue.current = value;
setDisplayValue(value);
return;
}
const start = previousValue.current;
const end = value;
const duration = 400; // 0.4秒动画
const startTime = performance.now();
const animate = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// easeOutQuart
const ease = 1 - Math.pow(1 - progress, 4);
const current = start + (end - start) * ease;
setDisplayValue(current);
if (progress < 1) {
requestAnimationFrame(animate);
} else {
previousValue.current = value;
}
};
requestAnimationFrame(animate);
}, [value]);
return (
<span className={className} style={style}>
{prefix}{Math.abs(displayValue).toFixed(decimals)}{suffix}
</span>
);
}
function GroupSummary({ funds, holdings, groupName, getProfit, stickyTop }) {
const [showPercent, setShowPercent] = useState(true);
const [isMasked, setIsMasked] = useState(false);
const [isSticky, setIsSticky] = useState(false);
const rowRef = useRef(null);
const [assetSize, setAssetSize] = useState(24);
const [metricSize, setMetricSize] = useState(18);
const [winW, setWinW] = useState(0);
useEffect(() => {
if (typeof window !== 'undefined') {
setWinW(window.innerWidth);
const onR = () => setWinW(window.innerWidth);
window.addEventListener('resize', onR);
return () => window.removeEventListener('resize', onR);
}
}, []);
const summary = useMemo(() => {
let totalAsset = 0;
let totalProfitToday = 0;
let totalHoldingReturn = 0;
let totalCost = 0;
let hasHolding = false;
let hasAnyTodayData = false;
funds.forEach(fund => {
const holding = holdings[fund.code];
const profit = getProfit(fund, holding);
if (profit) {
hasHolding = true;
totalAsset += profit.amount;
if (profit.profitToday != null) {
// 与卡片展示口径一致：先按“分”四舍五入再汇总，避免浮点误差/逐项舍入差导致不一致
totalProfitToday += Math.round(profit.profitToday * 100) / 100;
hasAnyTodayData = true;
}
if (profit.profitTotal !== null) {
totalHoldingReturn += profit.profitTotal;
if (holding && isNumber(holding.cost) && isNumber(holding.share)) {
totalCost += holding.cost * holding.share;
}
}
}
});
const returnRate = totalCost > 0 ? (totalHoldingReturn / totalCost) * 100 : 0;
return { totalAsset, totalProfitToday, totalHoldingReturn, hasHolding, returnRate, hasAnyTodayData };
}, [funds, holdings, getProfit]);
useLayoutEffect(() => {
const el = rowRef.current;
if (!el) return;
const height = el.clientHeight;
// 使用 80px 作为更严格的阈值，因为 margin/padding 可能导致实际占用更高
const tooTall = height > 80;
if (tooTall) {
setAssetSize(s => Math.max(16, s - 1));
setMetricSize(s => Math.max(12, s - 1));
} else {
// 如果高度正常，尝试适当恢复字体大小，但不要超过初始值
// 这里的逻辑可以优化：如果当前远小于阈值，可以尝试增大，但为了稳定性，主要处理缩小的场景
// 或者：如果高度非常小（例如远小于80），可以尝试+1，但要小心死循环
}
}, [winW, summary.totalAsset, summary.totalProfitToday, summary.totalHoldingReturn, summary.returnRate, showPercent, assetSize, metricSize]); // 添加 assetSize, metricSize 到依赖，确保逐步缩小生效
if (!summary.hasHolding) return null;
return (
<div className={isSticky ? "group-summary-sticky" : ""} style={isSticky && stickyTop ? { top: stickyTop } : {}}>
<div className="glass card group-summary-card" style={{ marginBottom: 8, padding: '16px 20px', background: 'rgba(255, 255, 255, 0.03)', position: 'relative' }}>
<span
className="sticky-toggle-btn"
onClick={() => setIsSticky(!isSticky)}
style={{
position: 'absolute',
top: 4,
right: 4,
width: 24,
height: 24,
padding: 4,
opacity: 0.6,
zIndex: 10,
color: 'var(--muted)'
}}
>
{isSticky ? <PinIcon width="14" height="14" /> : <PinOffIcon width="14" height="14" />}
</span>
<div ref={rowRef} className="row" style={{ alignItems: 'flex-end', justifyContent: 'space-between' }}>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
<div className="muted" style={{ fontSize: '12px' }}>{groupName}</div>
<button
className="fav-button"
onClick={() => setIsMasked(value => !value)}
aria-label={isMasked ? '显示资产' : '隐藏资产'}
style={{ margin: 0, padding: 2, display: 'inline-flex', alignItems: 'center' }}
>
{isMasked ? <EyeOffIcon width="16" height="16" /> : <EyeIcon width="16" height="16" />}
</button>
</div>
<div style={{ fontSize: '24px', fontWeight: 700, fontFamily: 'var(--font-mono)' }}>
<span style={{ fontSize: '16px', marginRight: 2 }}>¥</span>
{isMasked ? (
<span style={{ fontSize: assetSize, position: 'relative', top: 4 }}>******</span>
) : (
<CountUp value={summary.totalAsset} style={{ fontSize: assetSize }} />
)}
</div>
</div>
<div style={{ display: 'flex', gap: 24 }}>
<div style={{ textAlign: 'right' }}>
<div className="muted" style={{ fontSize: '12px', marginBottom: 4 }}>当日收益</div>
<div
className={summary.hasAnyTodayData ? (summary.totalProfitToday > 0 ? 'up' : summary.totalProfitToday < 0 ? 'down' : '') : 'muted'}
style={{ fontSize: '18px', fontWeight: 700, fontFamily: 'var(--font-mono)' }}
>
{isMasked ? (
<span style={{ fontSize: metricSize }}>******</span>
) : summary.hasAnyTodayData ? (
<>
<span style={{ marginRight: 1 }}>{summary.totalProfitToday > 0 ? '+' : summary.totalProfitToday < 0 ? '-' : ''}</span>
<CountUp value={Math.abs(summary.totalProfitToday)} style={{ fontSize: metricSize }} />
</>
) : (
<span style={{ fontSize: metricSize }}>--</span>
)}
</div>
</div>
<div style={{ textAlign: 'right' }}>
<div className="muted" style={{ fontSize: '12px', marginBottom: 4, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 2 }}>持有收益{showPercent ? '(%)' : ''} <SwitchIcon style={{ opacity: 0.4 }} /></div>
<div
className={summary.totalHoldingReturn > 0 ? 'up' : summary.totalHoldingReturn < 0 ? 'down' : ''}
style={{ fontSize: '18px', fontWeight: 700, fontFamily: 'var(--font-mono)', cursor: 'pointer' }}
onClick={() => setShowPercent(!showPercent)}
title="点击切换金额/百分比"
>
{isMasked ? (
<span style={{ fontSize: metricSize }}>******</span>
) : (
<>
<span style={{ marginRight: 1 }}>{summary.totalHoldingReturn > 0 ? '+' : summary.totalHoldingReturn < 0 ? '-' : ''}</span>
{showPercent ? (
<CountUp value={Math.abs(summary.returnRate)} suffix="%" style={{ fontSize: metricSize }} />
) : (
<CountUp value={Math.abs(summary.totalHoldingReturn)} style={{ fontSize: metricSize }} />
)}
</>
)}
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default function HomePage() {
const [funds, setFunds] = useState([]);
const [loading, setLoading] = useState(false);
@@ -531,6 +318,7 @@ export default function HomePage() {
const [isTradingDay, setIsTradingDay] = useState(true); // 默认为交易日，通过接口校正
const tabsRef = useRef(null);
const [fundDeleteConfirm, setFundDeleteConfirm] = useState(null); // { code, name }
const fundDetailDrawerCloseRef = useRef(null); // 由 MobileFundTable 注入，用于确认删除时关闭基金详情 Drawer
const todayStr = formatDate();
@@ -4129,15 +3917,11 @@ export default function HomePage() {
</div>
{displayFunds.length === 0 ? (
<div className="glass card empty" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '60px 20px' }}>
<div style={{ fontSize: '48px', marginBottom: 16, opacity: 0.5 }}>📂</div>
<div className="muted" style={{ marginBottom: 20 }}>{funds.length === 0 ? '尚未添加基金' : '该分组下暂无数据'}</div>
{currentTab !== 'all' && currentTab !== 'fav' && funds.length > 0 && (
<button className="button" onClick={() => setAddFundToGroupOpen(true)}>
添加基金到此分组
</button>
)}
</div>
<EmptyStateCard
fundsLength={funds.length}
currentTab={currentTab}
onAddToGroup={() => setAddFundToGroupOpen(true)}
/>
) : (
<>
<GroupSummary
@@ -4250,6 +4034,8 @@ export default function HomePage() {
favorites={favorites}
sortBy={sortBy}
stickyTop={navbarHeight + filterBarHeight - 14}
blockDrawerClose={!!fundDeleteConfirm}
closeDrawerRef={fundDetailDrawerCloseRef}
onReorder={handleReorder}
onRemoveFund={(row) => {
if (refreshing) return;
@@ -4279,6 +4065,37 @@ export default function HomePage() {
setPercentModes((prev) => ({ ...prev, [row.code]: !prev[row.code] }));
}}
onCustomSettingsChange={triggerCustomSettingsSync}
getFundCardProps={(row) => {
const fund = row?.rawFund || (row ? { code: row.code, name: row.fundName } : null);
if (!fund) return {};
return {
fund,
todayStr,
currentTab,
favorites,
dcaPlans,
holdings,
percentModes,
valuationSeries,
collapsedCodes,
collapsedTrends,
transactions,
theme,
isTradingDay,
refreshing,
getHoldingProfit,
onRemoveFromGroup: removeFundFromCurrentGroup,
onToggleFavorite: toggleFavorite,
onRemoveFund: requestRemoveFund,
onHoldingClick: (f) => setHoldingModal({ open: true, fund: f }),
onActionClick: (f) => setActionModal({ open: true, fund: f }),
onPercentModeToggle: (code) =>
setPercentModes((prev) => ({ ...prev, [code]: !prev[code] })),
onToggleCollapse: toggleCollapse,
onToggleTrendCollapse: toggleTrendCollapse,
layoutMode: 'drawer',
};
}}
/>
)}
<AnimatePresence mode="popLayout">
@@ -4293,274 +4110,33 @@ export default function HomePage() {
transition={{ duration: 0.2 }}
style={{ position: 'relative', overflow: 'hidden' }}
>
<motion.div
className="glass card"
style={{ position: 'relative', zIndex: 1 }}
>
<>
<div className="row" style={{ marginBottom: 10 }}>
<div className="title">
{currentTab !== 'all' && currentTab !== 'fav' ? (
<button
className="icon-button fav-button"
onClick={(e) => {
e.stopPropagation();
removeFundFromCurrentGroup(f.code);
}}
title="从当前分组移除"
>
<ExitIcon width="18" height="18" style={{ transform: 'rotate(180deg)' }} />
</button>
) : (
<button
className={`icon-button fav-button ${favorites.has(f.code) ? 'active' : ''}`}
onClick={(e) => {
e.stopPropagation();
toggleFavorite(f.code);
}}
title={favorites.has(f.code) ? "取消自选" : "添加自选"}
>
<StarIcon width="18" height="18" filled={favorites.has(f.code)} />
</button>
)}
<div className="title-text">
<span
className={`name-text`}
title={f.jzrq === todayStr ? "今日净值已更新" : ""}
>
{f.name}
</span>
<span className="muted">
#{f.code}
{dcaPlans[f.code]?.enabled === true && <span className="dca-indicator">定</span>}
{f.jzrq === todayStr && <span className="updated-indicator">✓</span>}
</span>
</div>
</div>
<div className="actions">
<div className="badge-v">
<span>{f.noValuation ? '净值日期' : '估值时间'}</span>
<strong>{f.noValuation ? (f.jzrq || '-') : (f.gztime || f.time || '-')}</strong>
</div>
<div className="row" style={{ gap: 4 }}>
<button
className="icon-button danger"
onClick={() => !refreshing && requestRemoveFund(f)}
title="删除"
disabled={refreshing}
style={{ width: '28px', height: '28px', opacity: refreshing ? 0.6 : 1, cursor: refreshing ? 'not-allowed' : 'pointer' }}
>
<TrashIcon width="14" height="14" />
</button>
</div>
</div>
</div>
<div className="row" style={{ marginBottom: 12 }}>
<Stat label="单位净值" value={f.dwjz ?? '—'} />
{f.noValuation ? (
// 无估值数据的基金，直接显示净值涨跌幅，不显示估值相关字段
<Stat
label="涨跌幅"
value={f.zzl !== undefined && f.zzl !== null ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%` : '—'}
delta={f.zzl}
/>
) : (
<>
{(() => {
const hasTodayData = f.jzrq === todayStr;
let isYesterdayChange = false;
let isPreviousTradingDay = false;
if (!hasTodayData && isString(f.jzrq)) {
const today = toTz(todayStr).startOf('day');
const jzDate = toTz(f.jzrq).startOf('day');
const yesterday = today.clone().subtract(1, 'day');
if (jzDate.isSame(yesterday, 'day')) {
isYesterdayChange = true;
} else if (jzDate.isBefore(yesterday, 'day')) {
isPreviousTradingDay = true;
}
}
const shouldHideChange = isTradingDay && !hasTodayData && !isYesterdayChange && !isPreviousTradingDay;
if (shouldHideChange) return null;
// 不再区分“上一交易日涨跌幅”名称，统一使用“昨日涨幅”
const changeLabel = hasTodayData ? '涨跌幅' : '昨日涨幅';
return (
<Stat
label={changeLabel}
value={f.zzl !== undefined ? `${f.zzl > 0 ? '+' : ''}${Number(f.zzl).toFixed(2)}%` : ''}
delta={f.zzl}
/>
);
})()}
<Stat label="估值净值" value={f.estPricedCoverage > 0.05 ? f.estGsz.toFixed(4) : (f.gsz ?? '—')} />
<Stat
label="估值涨幅"
value={f.estPricedCoverage > 0.05 ? `${f.estGszzl > 0 ? '+' : ''}${f.estGszzl.toFixed(2)}%` : (isNumber(f.gszzl) ? `${f.gszzl > 0 ? '+' : ''}${f.gszzl.toFixed(2)}%` : f.gszzl ?? '—')}
delta={f.estPricedCoverage > 0.05 ? f.estGszzl : (Number(f.gszzl) || 0)}
/>
</>
)}
</div>
<div className="row" style={{ marginBottom: 12 }}>
{(() => {
const holding = holdings[f.code];
const profit = getHoldingProfit(f, holding);
if (!profit) {
return (
<div className="stat" style={{ flexDirection: 'column', gap: 4 }}>
<span className="label">持仓金额</span>
<div
className="value muted"
style={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}
onClick={() => setHoldingModal({ open: true, fund: f })}
>
未设置 <SettingsIcon width="12" height="12" />
</div>
</div>
);
}
return (
<>
<div
className="stat"
style={{ cursor: 'pointer', flexDirection: 'column', gap: 4 }}
onClick={() => setActionModal({ open: true, fund: f })}
>
<span className="label" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
持仓金额 <SettingsIcon width="12" height="12" style={{ opacity: 0.7 }} />
</span>
<span className="value">¥{profit.amount.toFixed(2)}</span>
</div>
<div className="stat" style={{ flexDirection: 'column', gap: 4 }}>
<span className="label">当日收益</span>
<span className={`value ${profit.profitToday != null ? (profit.profitToday > 0 ? 'up' : profit.profitToday < 0 ? 'down' : '') : 'muted'}`}>
{profit.profitToday != null
? `${profit.profitToday > 0 ? '+' : profit.profitToday < 0 ? '-' : ''}¥${Math.abs(profit.profitToday).toFixed(2)}`
: '--'}
</span>
</div>
{profit.profitTotal !== null && (
<div
className="stat"
onClick={(e) => {
e.stopPropagation();
setPercentModes(prev => ({ ...prev, [f.code]: !prev[f.code] }));
}}
style={{ cursor: 'pointer', flexDirection: 'column', gap: 4 }}
title="点击切换金额/百分比"
>
<span className="label" style={{display: 'flex', alignItems: 'center', gap: 1}}>持有收益{percentModes[f.code] ? '(%)' : ''}<SwitchIcon/></span>
<span className={`value ${profit.profitTotal > 0 ? 'up' : profit.profitTotal < 0 ? 'down' : ''}`}>
{profit.profitTotal > 0 ? '+' : profit.profitTotal < 0 ? '-' : ''}
{percentModes[f.code]
? `${Math.abs((holding.cost * holding.share) ? (profit.profitTotal / (holding.cost * holding.share)) * 100 : 0).toFixed(2)}%`
: `¥${Math.abs(profit.profitTotal).toFixed(2)}`
}
</span>
</div>
)}
</>
);
})()}
</div>
{f.estPricedCoverage > 0.05 && (
<div style={{ fontSize: '10px', color: 'var(--muted)', marginTop: -8, marginBottom: 10, textAlign: 'right' }}>
基于 {Math.round(f.estPricedCoverage * 100)}% 持仓估算
</div>
)}
{(() => {
const showIntraday = Array.isArray(valuationSeries[f.code]) && valuationSeries[f.code].length >= 2;
if (!showIntraday) return null;
// 如果今日日期大于估值日期，说明是历史估值，不显示分时图
if (f.gztime && toTz(todayStr).startOf('day').isAfter(toTz(f.gztime).startOf('day'))) {
return null;
}
// 如果 jzrq 等于估值日期或在此之前（意味着净值已经更新到了估值日期，或者是历史数据），则隐藏实时估值分时
if (f.jzrq && f.gztime && toTz(f.jzrq).startOf('day').isSameOrAfter(toTz(f.gztime).startOf('day'))) {
return null;
}
return (
<FundIntradayChart
key={`${f.code}-intraday-${theme}`}
series={valuationSeries[f.code]}
referenceNav={f.dwjz != null ? Number(f.dwjz) : undefined}
theme={theme}
/>
);
})()}
{f.holdingsIsLastQuarter && Array.isArray(f.holdings) && f.holdings.length > 0 && (
<>
<div
style={{ marginBottom: 8, cursor: 'pointer', userSelect: 'none' }}
className="title"
onClick={() => toggleCollapse(f.code)}
>
<div className="row" style={{ width: '100%', flex: 1 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
<span>前10重仓股票</span>
<ChevronIcon
width="16"
height="16"
className="muted"
style={{
transform: collapsedCodes.has(f.code) ? 'rotate(-90deg)' : 'rotate(0deg)',
transition: 'transform 0.2s ease'
}}
/>
</div>
<span className="muted">涨跌幅 / 占比</span>
</div>
</div>
<AnimatePresence>
{!collapsedCodes.has(f.code) && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
style={{ overflow: 'hidden' }}
>
<div className="list">
{f.holdings.map((h, idx) => (
<div className="item" key={idx}>
<span className="name">{h.name}</span>
<div className="values">
{isNumber(h.change) && (
<span className={`badge ${h.change > 0 ? 'up' : h.change < 0 ? 'down' : ''}`} style={{ marginRight: 8 }}>
{h.change > 0 ? '+' : ''}{h.change.toFixed(2)}%
</span>
)}
<span className="weight">{h.weight}</span>
</div>
</div>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</>
)}
<FundTrendChart
key={`${f.code}-${theme}`}
code={f.code}
isExpanded={!collapsedTrends.has(f.code)}
onToggleExpand={() => toggleTrendCollapse(f.code)}
transactions={transactions[f.code] || []}
theme={theme}
/>
</>
</motion.div>
<FundCard
fund={f}
todayStr={todayStr}
currentTab={currentTab}
favorites={favorites}
dcaPlans={dcaPlans}
holdings={holdings}
percentModes={percentModes}
valuationSeries={valuationSeries}
collapsedCodes={collapsedCodes}
collapsedTrends={collapsedTrends}
transactions={transactions}
theme={theme}
isTradingDay={isTradingDay}
refreshing={refreshing}
getHoldingProfit={getHoldingProfit}
onRemoveFromGroup={removeFundFromCurrentGroup}
onToggleFavorite={toggleFavorite}
onRemoveFund={requestRemoveFund}
onHoldingClick={(fund) => setHoldingModal({ open: true, fund })}
onActionClick={(fund) => setActionModal({ open: true, fund })}
onPercentModeToggle={(code) =>
setPercentModes((prev) => ({ ...prev, [code]: !prev[code] }))
}
onToggleCollapse={toggleCollapse}
onToggleTrendCollapse={toggleTrendCollapse}
/>
</motion.div>
))}
</AnimatePresence>
@@ -4579,6 +4155,7 @@ export default function HomePage() {
message={`基金 "${fundDeleteConfirm.name}" 存在持仓记录。删除后将移除该基金及其持仓数据，是否继续？`}
confirmText="确定删除"
onConfirm={() => {
fundDetailDrawerCloseRef.current?.();
removeFund(fundDeleteConfirm.code);
setFundDeleteConfirm(null);
}}