289 lines
15 KiB
TypeScript
289 lines
15 KiB
TypeScript
/**
|
||
* HealthScoreModal Component
|
||
* Displays detailed financial health analysis with premium glassmorphism design
|
||
*/
|
||
|
||
import React, { useEffect, useState } from 'react';
|
||
import { Icon } from '@iconify/react';
|
||
import { formatCurrency } from '../../../utils/format';
|
||
import { getFinancialAdvice } from '../../../services/aiService';
|
||
import './HealthScoreModal.css';
|
||
|
||
interface HealthScoreModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
score: number;
|
||
totalAssets: number;
|
||
totalLiabilities: number;
|
||
todaySpend: number;
|
||
yesterdaySpend: number;
|
||
breakdown: {
|
||
solvency: number;
|
||
budget: number;
|
||
habit: number;
|
||
activity: number;
|
||
};
|
||
streakDays: number;
|
||
metrics: {
|
||
debtRatio: number;
|
||
survivalMonths: number;
|
||
budgetHealth: number;
|
||
};
|
||
tips: string[];
|
||
}
|
||
|
||
export const HealthScoreModal: React.FC<HealthScoreModalProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
score,
|
||
totalAssets,
|
||
totalLiabilities,
|
||
// todaySpend, // Unused
|
||
// yesterdaySpend, // Unused
|
||
breakdown,
|
||
streakDays,
|
||
metrics,
|
||
tips
|
||
}) => {
|
||
const [showRules, setShowRules] = useState(false);
|
||
const [animate, setAnimate] = useState(false);
|
||
const [aiAdvice, setAiAdvice] = useState<string>('');
|
||
const [loadingAdvice, setLoadingAdvice] = useState(false);
|
||
|
||
// --- Logic & Calculations ---
|
||
|
||
const debtRatio = totalAssets > 0 ? (totalLiabilities / totalAssets) * 100 : 0;
|
||
// const spendDiff = todaySpend - yesterdaySpend; // Unused now
|
||
|
||
useEffect(() => {
|
||
let isMounted = true;
|
||
if (isOpen) {
|
||
setTimeout(() => setAnimate(true), 50);
|
||
|
||
// Fetch AI Advice if not already fetched
|
||
if (!aiAdvice && !loadingAdvice) { // Only fetch if not already fetched or loading
|
||
setLoadingAdvice(true);
|
||
getFinancialAdvice({
|
||
score,
|
||
totalAssets,
|
||
totalLiabilities,
|
||
metrics,
|
||
tips
|
||
})
|
||
.then(advice => {
|
||
if (isMounted) setAiAdvice(advice);
|
||
})
|
||
.catch(err => {
|
||
console.error("Failed to load AI advice", err);
|
||
})
|
||
.finally(() => {
|
||
if (isMounted) setLoadingAdvice(false);
|
||
});
|
||
}
|
||
} else {
|
||
setAnimate(false);
|
||
setShowRules(false); // Reset view on close
|
||
}
|
||
return () => { isMounted = false; };
|
||
}, [isOpen, score, totalAssets, totalLiabilities, metrics, tips]);
|
||
|
||
|
||
if (!isOpen) return null;
|
||
|
||
// Status Levels
|
||
const getLevel = (s: number) => {
|
||
if (s >= 95) return { label: 'SSS', title: '财务自由', color: '#10b981', icon: 'solar:crown-star-bold-duotone', desc: '完美无瑕的资产结构' };
|
||
if (s >= 90) return { label: 'S', title: '卓越', color: '#34d399', icon: 'solar:cup-star-bold-duotone', desc: '财务状况极佳' };
|
||
if (s >= 80) return { label: 'A', title: '优秀', color: '#3b82f6', icon: 'solar:medal-star-bold-duotone', desc: '资产配置健康' };
|
||
if (s >= 70) return { label: 'B', title: '良好', color: '#6366f1', icon: 'solar:check-circle-bold-duotone', desc: '继续保持记账习惯' };
|
||
if (s >= 60) return { label: 'C', title: '及格', color: '#f59e0b', icon: 'solar:info-circle-bold-duotone', desc: '需注意控制负债' };
|
||
return { label: 'D', title: '危险', color: '#ef4444', icon: 'solar:danger-circle-bold-duotone', desc: '建议立即调整开支' };
|
||
};
|
||
|
||
const level = getLevel(score);
|
||
|
||
|
||
|
||
// --- Render Helpers ---
|
||
|
||
return (
|
||
<div className="health-modal-overlay" onClick={onClose}>
|
||
<div
|
||
className={`health-modal-content ${animate ? 'animate-in' : ''}`}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Header Controls */}
|
||
<div className="health-modal-controls">
|
||
<button
|
||
className="health-icon-btn"
|
||
onClick={() => setShowRules(!showRules)}
|
||
title={showRules ? "返回评分" : "查看规则"}
|
||
>
|
||
<Icon icon={showRules ? "solar:arrow-left-bold-duotone" : "solar:question-circle-bold-duotone"} width="20" />
|
||
</button>
|
||
<button className="health-icon-btn" onClick={onClose}>
|
||
<Icon icon="solar:close-circle-bold-duotone" width="20" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="health-scroll-container">
|
||
{showRules ? (
|
||
// --- Rules View ---
|
||
<div className="health-rules-panel">
|
||
<h3 style={{ fontSize: '1.25rem', fontWeight: 700, margin: '0 0 1.5rem', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<Icon icon="solar:ruler-pen-bold-duotone" className="text-primary" />
|
||
评分细则
|
||
</h3>
|
||
|
||
<div className="rule-item">
|
||
<div className="rule-score rule-score--blue">{breakdown.solvency}/40</div>
|
||
<div className="rule-desc-group">
|
||
<h4>财务结构 (40分)</h4>
|
||
<p>由“负债率”与“应急流动性”共同决定。不仅关注负债水平，更看重现金流能否支撑至少3-6个月的生活开支。<br />这是抵御风险的基石。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rule-item">
|
||
<div className="rule-score rule-score--green">{breakdown.budget}/30</div>
|
||
<div className="rule-desc-group">
|
||
<h4>收支控制 (30分)</h4>
|
||
<p>考察预算执行率与时间进度的关系。月中花费50%是健康的，月初花费50%则会扣分。<br />{breakdown.budget === 30 ? '当前预算控制极佳。' : '需注意平滑消费曲线。'}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rule-item">
|
||
<div className="rule-score rule-score--orange">{breakdown.habit}/20</div>
|
||
<div className="rule-desc-group">
|
||
<h4>记账习惯 (20分)</h4>
|
||
<p>连续记账天数(Streak)奖励。坚持越久得分越高。<br />当前连续: {streakDays} 天</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rule-item">
|
||
<div className="rule-score rule-score--purple">{breakdown.activity}/10</div>
|
||
<div className="rule-desc-group">
|
||
<h4>活跃度 (10分)</h4>
|
||
<p>近48小时内是否有记账行为。保持关注有助于及时发现财务风险。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
// --- Score View ---
|
||
<>
|
||
<div className="health-score-section">
|
||
<div className="health-score-ring-container">
|
||
<svg className="health-score-ring-svg" viewBox="0 0 100 100">
|
||
<defs>
|
||
<linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stopColor="#4ade80" />
|
||
<stop offset="100%" stopColor="#22c55e" />
|
||
</linearGradient>
|
||
</defs>
|
||
{/* Background Ring */}
|
||
<circle
|
||
cx="50" cy="50" r="45"
|
||
fill="none"
|
||
stroke="rgba(255,255,255,0.1)"
|
||
strokeWidth="8"
|
||
/>
|
||
{/* Progress Ring */}
|
||
<circle
|
||
cx="50" cy="50" r="45"
|
||
fill="none"
|
||
stroke={level.color} /* Use level color or gradient */
|
||
strokeWidth="8"
|
||
strokeLinecap="round"
|
||
strokeDasharray={`${283 * (score / 100)} 283`}
|
||
className="health-ring-progress"
|
||
/>
|
||
</svg>
|
||
<div className="health-score-content">
|
||
<span className="health-score-number">{score}</span>
|
||
<span className="health-score-label">健康分</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="health-level-badge" style={{ borderColor: `${level.color}40`, background: `${level.color}15` }}>
|
||
<Icon icon={level.icon} width="20" color={level.color} />
|
||
<span style={{ color: level.color }}>{level.title} · {level.desc}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="health-metrics-grid">
|
||
{/* Debt Card */}
|
||
<div className="health-metric-card">
|
||
<div className="metric-icon-wrapper" style={{ background: 'rgba(239, 68, 68, 0.15)' }}>
|
||
<Icon icon="solar:card-2-bold-duotone" width="20" color="#ef4444" />
|
||
</div>
|
||
<span className="metric-title">负债率</span>
|
||
<div className="metric-value-group">
|
||
<span className="metric-number">{debtRatio.toFixed(1)}%</span>
|
||
<span className="metric-tag" style={{
|
||
backgroundColor: debtRatio > 30 ? 'rgba(239, 68, 68, 0.2)' : 'rgba(16, 185, 129, 0.2)',
|
||
color: debtRatio > 30 ? '#ef4444' : '#10b981'
|
||
}}>
|
||
{debtRatio > 30 ? '一般' : '优秀'}
|
||
</span>
|
||
</div>
|
||
<span className="metric-subtitle">
|
||
{debtRatio === 0 ? '无负债一身轻' : `负债 ${formatCurrency(totalLiabilities)}`}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Survival Time Card (Replacing Spend) */}
|
||
<div className="health-metric-card">
|
||
<div className="metric-icon-wrapper" style={{ background: 'rgba(16, 185, 129, 0.15)' }}>
|
||
<Icon icon="solar:shield-check-bold-duotone" width="20" color="#10b981" />
|
||
</div>
|
||
<span className="metric-title">生存期</span>
|
||
<div className="metric-value-group">
|
||
<span className="metric-number">
|
||
{metrics?.survivalMonths > 99 ? '>99' : (metrics?.survivalMonths || 0).toFixed(1)}
|
||
</span>
|
||
<span style={{ fontSize: '1rem', fontWeight: 600, marginLeft: '2px' }}>个月</span>
|
||
</div>
|
||
<span className="metric-subtitle" style={{ color: (metrics?.survivalMonths || 0) < 3 ? '#ef4444' : '#10b981' }}>
|
||
{(metrics?.survivalMonths || 0) >= 6 ? '资金充裕' : (metrics?.survivalMonths || 0) >= 3 ? '健康' : '急需储备'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Suggestion Box */}
|
||
<div className="health-suggestion-box">
|
||
<div className="suggestion-header">
|
||
<Icon icon="solar:lightbulb-bolt-bold-duotone" width="20" />
|
||
<span>AI 智能建议</span>
|
||
</div>
|
||
<div className="suggestion-content">
|
||
{/* Static Tips */}
|
||
{tips && tips.length > 0 && tips.map((tip, i) => (
|
||
<div key={i} style={{ marginBottom: '8px', fontSize: '0.9rem', color: 'rgba(255,255,255,0.9)' }}>{tip}</div>
|
||
))}
|
||
|
||
{/* AI Dynamic Advice */}
|
||
{loadingAdvice ? (
|
||
<div style={{ marginTop: '12px', fontSize: '0.85rem', opacity: 0.7, fontStyle: 'italic', display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||
<span className="loading-dots">CFO 正在分析您的财务报表...</span>
|
||
</div>
|
||
) : aiAdvice && (
|
||
<div style={{ marginTop: '12px', paddingTop: '12px', borderTop: '1px solid rgba(255,255,255,0.1)', fontSize: '0.9rem', lineHeight: '1.6', color: '#60a5fa' }}>
|
||
<Icon icon="solar:chat-round-line-duotone" style={{ marginRight: '6px', verticalAlign: 'text-bottom' }} />
|
||
{aiAdvice}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
<div className="health-actions-bottom">
|
||
<button className="health-confirm-btn" onClick={onClose}>
|
||
{showRules ? '返回' : '明白了'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|