feat: 新增 DailyInsightCard 组件,用于展示每日消费洞察并集成AI分析功能。
This commit is contained in:
@@ -196,44 +196,4 @@
|
||||
.daily-insight__tip svg {
|
||||
color: var(--color-primary);
|
||||
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>
|
||||
</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