feat: 新增 DailyInsightCard 组件,用于展示每日消费洞察并集成AI分析功能。

This commit is contained in:
2026-01-29 00:19:46 +08:00
parent c80f64346e
commit 7f42655d90
2 changed files with 0 additions and 62 deletions

View File

@@ -154,29 +154,7 @@ export const DailyInsightCard: React.FC<DailyInsightCardProps> = ({
<p className="daily-insight__text animate-fade-in">{spendingInsight.text}</p>
</div>
{/* 7-Day Trend Chart */}
{last7DaysSpend && last7DaysSpend.length > 0 && (
<div className="daily-insight__section">
<span className="daily-insight__title">7</span>
<div className="trend-chart">
{last7DaysSpend.map((amount, index) => {
const maxVal = Math.max(...last7DaysSpend, 1);
const heightPercent = Math.max((amount / maxVal) * 100, 10); // Min 10% height
const isToday = index === last7DaysSpend.length - 1;
const isMax = amount === maxVal && amount > 0;
return (
<div key={index} className="trend-bar-wrapper" title={`Day ${index - 6}: ¥${amount}`}>
<div
className={`trend-bar ${isToday ? 'trend-bar--today' : ''} ${isMax ? 'trend-bar--max' : ''}`}
style={{ height: `${heightPercent}%` }}
/>
</div>
);
})}
</div>
</div>
)}
<div className="daily-insight__divider" />