feat: 新增财务健康评分模态框组件，展示详细评分、细则及AI建议。

src/components/home/HealthScoreModal/HealthScoreModal.css

@@ -464,39 +464,72 @@
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.9);
     line-height: 1.5;
-    padding-left: 0.5rem;
-    border-left: 2px solid rgba(255, 255, 255, 0.2);
+    padding-left: 1rem;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.tip-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 8px;
+    width: 6px;
+    height: 6px;
+    background: #60a5fa;
+    border-radius: 50%;
+    opacity: 0.5;
+}
+
+.tip-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding-left: 1.5rem;
+    padding-right: 0.5rem;
+}
+
+.tip-item:hover::before {
+    background: #4ade80;
+    opacity: 1;
+    left: 0.5rem;
 }
 
 .ai-advice-container {
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px dashed rgba(255, 255, 255, 0.15);
+    animation: fadeInUp 0.5s ease-out forwards;
 }
 
 .ai-advice-box {
-    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent);
-    border-left: 3px solid #60a5fa;
-    padding: 1rem;
-    border-radius: 0 12px 12px 0;
-    font-size: 0.9rem;
+    /* Refactored to blend in */
+    background: transparent;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    backdrop-filter: none;
+    font-size: 0.95rem;
     line-height: 1.6;
     color: #93c5fd;
+    /* Keep the blue text distinctive */
     position: relative;
+    padding-left: 2rem;
+    /* Space for icon */
 }
 
 .ai-advice-icon {
     position: absolute;
-    top: 1rem;
-    left: 1rem;
+    top: 2px;
+    left: 0;
     color: #60a5fa;
+    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.4));
 }
 
 .ai-advice-text {
     display: block;
     margin-left: 0;
-    /* Adjusted layout */
     text-align: justify;
+    font-weight: 500;
 }
 
 .ai-loading {
@@ -508,4 +541,16 @@
     align-items: center;
     gap: 8px;
     padding-left: 0.5rem;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

src/components/home/HealthScoreModal/HealthScoreModal.tsx

@@ -257,18 +257,20 @@ export const HealthScoreModal: React.FC<HealthScoreModalProps> = ({
                                 <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>
+                                        <div key={i} className="tip-item">{tip}</div>
                                     ))}
 
                                     {/* AI Dynamic Advice */}
                                     {loadingAdvice ? (
-                                        <div style={{ marginTop: '12px', fontSize: '0.85rem', opacity: 0.7, fontStyle: 'italic', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                        <div className="ai-loading">
                                             <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 className="ai-advice-container">
+                                            <div className="ai-advice-box">
+                                                <Icon icon="solar:chat-round-line-duotone" className="ai-advice-icon" width="20" />
+                                                <span className="ai-advice-text">{aiAdvice}</span>
+                                            </div>
                                         </div>
                                     )}
                                 </div>