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