feat: 新增 DailyInsightCard 组件,用于展示每日消费洞察并集成AI分析功能。
This commit is contained in:
@@ -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" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user