Novault/Novault-Frontend-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-feat 修复json格式问题

Browse Source
This commit is contained in:
12975
2026-01-28 21:48:50 +08:00
parent e163fadd01
commit 303b4ed001
2 changed files with 161 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/components/home/DailyInsightCard/DailyInsightCard.tsx
View File

@@ -1,4 +1,3 @@
```typescript
import React, { useState, useEffect } from 'react';
import { Icon } from '@iconify/react';
import { formatCurrency } from '../../../utils/format';
@@ -26,7 +25,7 @@ export const DailyInsightCard: React.FC<DailyInsightCardProps> = ({
lastWeekSpend,
streakDays
}) => {
const [aiData, setAiData] = useState<{spending: string; budget: string} | null>(null);
const [aiData, setAiData] = useState<{ spending: string; budget: string } | null>(null);
const [isAiLoading, setIsAiLoading] = useState(false);
useEffect(() => {
@@ -34,31 +33,31 @@ export const DailyInsightCard: React.FC<DailyInsightCardProps> = ({
if (monthlyBudget === 0 && todaySpend === 0 && yesterdaySpend === 0) return;
const fetchAI = async () => {
setIsAiLoading(true);
try {
const today = new Date().getDate();
const daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
const result = await getDailyInsight({
todaySpend,
yesterdaySpend,
monthlyBudget,
monthlySpent,
monthProgress: today / daysInMonth,
topCategory,
maxTransaction: maxTransaction ? {
note: maxTransaction.note || '',
amount: maxTransaction.amount
} : undefined,
lastWeekSpend,
streakDays
});
setAiData(result);
} catch (e) {
console.warn('AI insight fetch failed, sticking to local logic');
} finally {
setIsAiLoading(false);
}
setIsAiLoading(true);
try {
const today = new Date().getDate();
const daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
const result = await getDailyInsight({
todaySpend,
yesterdaySpend,
monthlyBudget,
monthlySpent,
monthProgress: today / daysInMonth,
topCategory,
maxTransaction: maxTransaction ? {
note: maxTransaction.note || '',
amount: maxTransaction.amount
} : undefined,
lastWeekSpend,
streakDays
});
setAiData(result);
} catch (e) {
console.warn('AI insight fetch failed, sticking to local logic');
} finally {
setIsAiLoading(false);
}
};
const timer = setTimeout(fetchAI, 500);
@@ -69,18 +68,18 @@ export const DailyInsightCard: React.FC<DailyInsightCardProps> = ({
if (aiData) return { text: <span>{aiData.spending}</span>, type: 'ai' };
if (today === 0) return { text: "今天还没有花钱，保持这种“零消费”状态就是最大的赚钱！", type: 'success' };
if (yesterday === 0) return { text: <span>今天花了 <strong className="daily-insight__highlight">{formatCurrency(today)}</strong>，既然昨天没花钱，今天稍微奢侈一点也无妨。</span>, type: 'normal' };
const diff = today - yesterday;
if (Math.abs(diff) < 10) return { text: <span>今天支出 <strong className="daily-insight__highlight">{formatCurrency(today)}</strong>，跟昨天差不多，生活节奏很稳。</span>, type: 'normal' };
if (today < yesterday) {
const percent = Math.round(((yesterday - today) / yesterday) * 100);
return { text: <span>比昨天少花了 <strong className="daily-insight__highlight daily-insight__highlight--success">{percent}%</strong>！这就是进步，省下来的钱可以积少成多。</span>, type: 'success' };
const percent = Math.round(((yesterday - today) / yesterday) * 100);
return { text: <span>比昨天少花了 <strong className="daily-insight__highlight daily-insight__highlight--success">{percent}%</strong>！这就是进步，省下来的钱可以积少成多。</span>, type: 'success' };
} else {
const percent = Math.round(((today - yesterday) / yesterday) * 100);
return { text: <span>比昨天多花了 <strong className="daily-insight__highlight daily-insight__highlight--warning">{percent}%</strong>。如果不是必需品，记得明天稍微控制一下哦。</span>, type: 'warning' };
const percent = Math.round(((today - yesterday) / yesterday) * 100);
return { text: <span>比昨天多花了 <strong className="daily-insight__highlight daily-insight__highlight--warning">{percent}%</strong>。如果不是必需品，记得明天稍微控制一下哦。</span>, type: 'warning' };
}
};
@@ -88,57 +87,56 @@ export const DailyInsightCard: React.FC<DailyInsightCardProps> = ({
if (aiData) return { text: <span>{aiData.budget}</span>, type: 'ai' };
if (total === 0) return { text: "您还没有设置月度预算，建议去设置一个。", type: 'normal' };
const ratio = spent / total;
const today = new Date().getDate();
const daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
const timeRatio = today / daysInMonth;
const timeRatio = today / daysInMonth;
if (ratio >= 1) return { text: <span className="daily-insight__highlight daily-insight__highlight--danger">本月预算已耗尽！接下来的每一天都需要极限生存挑战了。</span>, type: 'danger' };
if (ratio > timeRatio + 0.15) {
return { text: <span>进度 <strong className="daily-insight__highlight daily-insight__highlight--warning">{Math.round(ratio*100)}%</strong> (时间 {Math.round(timeRatio*100)}%)。花钱速度有点快了，建议踩踩刹车。</span>, type: 'warning' };
return { text: <span>进度 <strong className="daily-insight__highlight daily-insight__highlight--warning">{Math.round(ratio * 100)}%</strong> (时间 {Math.round(timeRatio * 100)}%)。花钱速度有点快了，建议踩踩刹车。</span>, type: 'warning' };
}
if (ratio < timeRatio - 0.1) {
return { text: <span>进度 <strong className="daily-insight__highlight daily-insight__highlight--success">{Math.round(ratio*100)}%</strong> (时间 {Math.round(timeRatio*100)}%)。控制得非常完美，月底可能有惊喜结余！</span>, type: 'success' };
return { text: <span>进度 <strong className="daily-insight__highlight daily-insight__highlight--success">{Math.round(ratio * 100)}%</strong> (时间 {Math.round(timeRatio * 100)}%)。控制得非常完美，月底可能有惊喜结余！</span>, type: 'success' };
}
return { text: <span>进度 <strong>{Math.round(ratio*100)}%</strong> (时间 {Math.round(timeRatio*100)}%)。目前节奏刚刚好，稳扎稳打。</span>, type: 'normal' };
return { text: <span>进度 <strong>{Math.round(ratio * 100)}%</strong> (时间 {Math.round(timeRatio * 100)}%)。目前节奏刚刚好，稳扎稳打。</span>, type: 'normal' };
};
const spendingInsight = getSpendingInsight(todaySpend, yesterdaySpend);
const budgetInsight = getBudgetInsight(monthlySpent, monthlyBudget);
return (
<div className={`daily - insight - card ${ aiData ? 'daily-insight-card--ai' : '' } `}>
<div className="daily-insight__header">
<Icon icon={aiData ? "solar:magic-stick-3-bold-duotone" : "solar:stars-minimalistic-bold-duotone"} width="20" />
<span>{aiData ? 'AI 每日简报' : '每日简报'}</span>
{isAiLoading && !aiData && <span className="daily-insight__loading-badge">AI 思考中...</span>}
</div>
<div className="daily-insight__content">
<div className="daily-insight__section">
<div className="section-header-row">
<span className="daily-insight__title">今日消费</span>
{lastWeekSpend !== undefined && lastWeekSpend > 0 && (
<span className={`week - diff - badge ${ todaySpend <= lastWeekSpend ? 'green' : 'red' } `}>
周同比 {todaySpend <= lastWeekSpend ? '↓' : '↑'}{Math.abs(todaySpend - lastWeekSpend).toFixed(0)}
</span>
)}
</div>
<p className="daily-insight__text animate-fade-in">{spendingInsight.text}</p>
<div className={`daily-insight-card ${aiData ? 'daily-insight-card--ai' : ''}`}>
<div className="daily-insight__header">
<Icon icon={aiData ? "solar:magic-stick-3-bold-duotone" : "solar:stars-minimalistic-bold-duotone"} width="20" />
<span>{aiData ? 'AI 每日简报' : '每日简报'}</span>
{isAiLoading && !aiData && <span className="daily-insight__loading-badge">AI 思考中...</span>}
</div>
<div className="daily-insight__content">
<div className="daily-insight__section">
<div className="section-header-row">
<span className="daily-insight__title">今日消费</span>
{lastWeekSpend !== undefined && lastWeekSpend > 0 && (
<span className={`week-diff-badge ${todaySpend <= lastWeekSpend ? 'green' : 'red'}`}>
周同比 {todaySpend <= lastWeekSpend ? '↓' : '↑'}{Math.abs(todaySpend - lastWeekSpend).toFixed(0)}
</span>
)}
</div>
<div className="daily-insight__divider" />
<div className="daily-insight__section">
<span className="daily-insight__title">预算风向标</span>
<p className="daily-insight__text animate-fade-in">{budgetInsight.text}</p>
</div>
</div>
<p className="daily-insight__text animate-fade-in">{spendingInsight.text}</p>
</div>
<div className="daily-insight__divider" />
<div className="daily-insight__section">
<span className="daily-insight__title">预算风向标</span>
<p className="daily-insight__text animate-fade-in">{budgetInsight.text}</p>
</div>
</div>
</div>
);
};
```