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

@@ -197,43 +197,3 @@
color: var(--color-primary); color: var(--color-primary);
flex-shrink: 0; flex-shrink: 0;
} }
/* Trend Chart */
.trend-chart {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 60px;
padding-top: 10px;
gap: 4px;
}
.trend-bar-wrapper {
flex: 1;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.trend-bar {
width: 60%;
background: rgba(var(--color-text-rgb), 0.1);
border-radius: 4px;
transition: all 0.3s ease;
min-height: 4px;
}
.trend-bar--today {
background: var(--color-primary);
box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.4);
}
.trend-bar--max {
background: var(--color-warning, #F59E0B);
}
/* If today is also max, give it a special gradient */
.trend-bar--today.trend-bar--max {
background: linear-gradient(to top, var(--color-primary), var(--color-warning, #F59E0B));
}

View File

@@ -154,29 +154,7 @@ export const DailyInsightCard: React.FC<DailyInsightCardProps> = ({
<p className="daily-insight__text animate-fade-in">{spendingInsight.text}</p> <p className="daily-insight__text animate-fade-in">{spendingInsight.text}</p>
</div> </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" /> <div className="daily-insight__divider" />