From 4a525124c5eef19c75652ce010774875c50c8632 Mon Sep 17 00:00:00 2001
From: MingNian <1281442923@qq.com>
Date: Fri, 22 May 2026 10:48:14 +0800
Subject: [PATCH] fix: chat history persists, reuse active consultation, load
 messages properly

---
 .../src/components/layout/TabBar.tsx          |  9 +--
 .../src/pages/home/HomePage.module.css        | 57 ++++++++++++++----
 frontend-patient/src/pages/home/HomePage.tsx  | 33 ++++-------
 .../src/pages/services/ChatPage.tsx           | 59 +++++++------------
 .../src/services/consultation.service.ts      |  4 +-
 5 files changed, 83 insertions(+), 79 deletions(-)

diff --git a/frontend-patient/src/components/layout/TabBar.tsx b/frontend-patient/src/components/layout/TabBar.tsx
index cb0aece..02b4691 100644
--- a/frontend-patient/src/components/layout/TabBar.tsx
+++ b/frontend-patient/src/components/layout/TabBar.tsx
@@ -1,12 +1,10 @@
 import { useNavigate, useLocation } from 'react-router-dom';
 import { NAV_ITEMS } from '@/utils/constants';
-import { useNotificationStore } from '@/stores/notification.store';
 import styles from './TabBar.module.css';
 
 export function TabBar() {
   const navigate = useNavigate();
   const location = useLocation();
-  const unreadCount = useNotificationStore((s) => s.unreadCount);
 
   return (
     <nav className={styles.tabBar}>
@@ -18,12 +16,7 @@ export function TabBar() {
             className={`${styles.tab} ${isActive ? styles.tabActive : ''}`}
             onClick={() => navigate(item.path)}
           >
-            <span className={styles.tabIcon}>
-              {item.icon}
-              {item.path === '/services' && unreadCount > 0 && (
-                <span className={styles.badge}>{unreadCount > 99 ? '99+' : unreadCount}</span>
-              )}
-            </span>
+            <span className={styles.tabIcon}>{item.icon}</span>
             <span className={styles.tabLabel}>{item.label}</span>
           </button>
         );
diff --git a/frontend-patient/src/pages/home/HomePage.module.css b/frontend-patient/src/pages/home/HomePage.module.css
index 8499f45..a4bbcd6 100644
--- a/frontend-patient/src/pages/home/HomePage.module.css
+++ b/frontend-patient/src/pages/home/HomePage.module.css
@@ -1,3 +1,16 @@
+.greetingBar {
+  padding: 8px 0 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.greetingText {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
 .notifyBtn {
   position: relative;
   font-size: 20px;
@@ -12,12 +25,30 @@
   box-shadow: var(--shadow-xs);
 }
 
+.notifyBadge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: #EF4444;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
 .overviewCard {
   margin-bottom: 16px;
   background: linear-gradient(135deg, #2563EB 0%, #3B82F6 40%, #5B9AFF 100%);
   color: #fff;
   border-radius: var(--radius-xl);
-  padding: 20px;
+  padding: 16px 14px;
   overflow: hidden;
 }
 
@@ -25,7 +56,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 18px;
+  margin-bottom: 14px;
 }
 
 .overviewTitle {
@@ -42,56 +73,60 @@
 .overviewData {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 6px;
 }
 
 .bpSection,
 .hrSection {
   flex: 1;
+  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
+  gap: 2px;
 }
 
 .dataLabel {
-  font-size: var(--font-size-xs);
+  font-size: 10px;
   opacity: 0.7;
 }
 
 .bpValues {
   display: flex;
   align-items: baseline;
-  gap: 4px;
+  gap: 2px;
 }
 
 .bpNum {
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 700;
   line-height: 1.1;
   color: #fff;
+  white-space: nowrap;
 }
 
 .bpSep {
-  font-size: var(--font-size-xl);
+  font-size: var(--font-size-md);
   opacity: 0.5;
 }
 
 .hrNum {
-  font-size: 36px;
+  font-size: 24px;
   font-weight: 700;
   line-height: 1.1;
+  white-space: nowrap;
 }
 
 .unit {
-  font-size: var(--font-size-xs);
+  font-size: 10px;
   opacity: 0.6;
 }
 
 .divider {
   width: 1px;
-  height: 60px;
+  height: 48px;
   background: rgba(255,255,255,0.2);
+  flex-shrink: 0;
 }
 
 /* Quick Actions */
diff --git a/frontend-patient/src/pages/home/HomePage.tsx b/frontend-patient/src/pages/home/HomePage.tsx
index c1f2fa2..7c3147d 100644
--- a/frontend-patient/src/pages/home/HomePage.tsx
+++ b/frontend-patient/src/pages/home/HomePage.tsx
@@ -9,12 +9,12 @@ import type { HealthStats } from '@/types';
 import styles from './HomePage.module.css';
 
 const QUICK_ACTIONS = [
-  { key: 'bp', label: '血压', icon: '💓', path: '/health/records?type=blood_pressure', badge: false },
-  { key: 'med', label: '用药', icon: '💊', path: '/health/medications', badge: false },
-  { key: 'chat', label: '问诊', icon: '💬', path: '/services/consultation', badge: true },
-  { key: 'report', label: '报告', icon: '📋', path: '/services/reports', badge: true },
-  { key: 'calendar', label: '日历', icon: '📅', path: '/health/calendar', badge: false },
-  { key: 'followup', label: '复查', icon: '🏥', path: '/services/follow-ups', badge: false },
+  { key: 'bp', label: '血压', icon: '💓', path: '/health/records?type=blood_pressure' },
+  { key: 'med', label: '用药', icon: '💊', path: '/health/medications' },
+  { key: 'chat', label: '问诊', icon: '💬', path: '/services/consultation' },
+  { key: 'report', label: '报告', icon: '📋', path: '/services/reports' },
+  { key: 'calendar', label: '日历', icon: '📅', path: '/health/calendar' },
+  { key: 'followup', label: '复查', icon: '🏥', path: '/services/follow-ups' },
 ];
 
 export function HomePage() {
@@ -39,13 +39,11 @@ export function HomePage() {
   const riskLevel = systolic && diastolic ? getBPRiskLevel(systolic, diastolic) : null;
 
   return (
-    <div className="page">
-      <div style={{ padding: '16px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <div>
-          <div style={{ fontSize: 22, fontWeight: 700, color: '#1A1E2B' }}>你好，{user?.nickname || '用户'}</div>
-        </div>
+    <div className="page" style={{ paddingTop: 0 }}>
+      <div className={styles.greetingBar}>
+        <div className={styles.greetingText}>你好，{user?.nickname || '用户'}</div>
         <button onClick={() => navigate('/notifications')} className={styles.notifyBtn}>
-          🔔{unreadCount > 0 && <span style={{ position: 'absolute', top: -2, right: -2, width: 16, height: 16, borderRadius: 8, background: '#EF4444', color: '#fff', fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600 }}>{unreadCount}</span>}
+          🔔{unreadCount > 0 && <span className={styles.notifyBadge}>{unreadCount > 99 ? '99+' : unreadCount}</span>}
         </button>
       </div>
 
@@ -96,16 +94,7 @@ export function HomePage() {
       <div className={styles.quickActions}>
         {QUICK_ACTIONS.map((action) => (
           <button key={action.key} className={styles.quickAction} onClick={() => navigate(action.path)}>
-            <span className={styles.quickIcon}>
-              {action.icon}
-              {action.badge && unreadCount > 0 && (
-                <span style={{
-                  position: 'absolute', top: -4, right: -8, minWidth: 18, height: 18,
-                  borderRadius: 9, background: '#EF4444', color: '#fff', fontSize: 10,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600,
-                }}>{unreadCount}</span>
-              )}
-            </span>
+            <span className={styles.quickIcon}>{action.icon}</span>
             <span className={styles.quickLabel}>{action.label}</span>
           </button>
         ))}
diff --git a/frontend-patient/src/pages/services/ChatPage.tsx b/frontend-patient/src/pages/services/ChatPage.tsx
index dc9fd86..5b78409 100644
--- a/frontend-patient/src/pages/services/ChatPage.tsx
+++ b/frontend-patient/src/pages/services/ChatPage.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { PageHeader } from '@/components/layout/PageHeader';
+import { api } from '@/services/api-client';
 import * as consultationService from '@/services/consultation.service';
 import type { Consultation, ConsultationMessage, Doctor } from '@/types';
 import { formatRelative } from '@/utils/format';
@@ -13,51 +14,45 @@ export function ChatPage() {
   const [sending, setSending] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
+  const loadMessages = useCallback((cid: string) => {
+    api.get<ConsultationMessage[]>(`/api/consultations/${cid}/messages`)
+      .then((res) => setMessages(res.data))
+      .catch(() => {});
+  }, []);
+
   useEffect(() => {
-    // Get the first available doctor
     consultationService.getDoctors().then((docs) => {
       if (docs.length > 0) {
         const doc = docs[0];
         setDoctor(doc);
-        // Find or create consultation
-        consultationService.getConsultation(doc.id).then(async (c) => {
-          if (c) {
-            setConsultation(c);
-            loadMessages(c.id);
-          } else {
-            const newC = await consultationService.startConsultation(doc.id, '在线咨询');
-            setConsultation(newC);
-          }
+        consultationService.startConsultation(doc.id, '在线咨询').then((c) => {
+          setConsultation(c);
+          loadMessages(c.id);
         });
       }
     });
-  }, []);
-
-  const loadMessages = (cid: string) => {
-    import('@/services/api-client').then(({ api }) => {
-      api.get<ConsultationMessage[]>(`/api/consultations/${cid}/messages`)
-        .then((res) => setMessages(res.data));
-    });
-  };
+  }, [loadMessages]);
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
+  // Poll every 3s
   useEffect(() => {
-    // Poll for new messages every 3 seconds
     if (!consultation?.id) return;
     const timer = setInterval(() => loadMessages(consultation.id), 3000);
     return () => clearInterval(timer);
-  }, [consultation?.id]);
+  }, [consultation?.id, loadMessages]);
 
   const handleSend = async () => {
     if (!text.trim() || !consultation || sending) return;
     setSending(true);
     const msgText = text;
     setText('');
-    const sent = await consultationService.sendMessage(consultation.id, msgText);
-    setMessages((prev) => [...prev, sent]);
+    try {
+      const sent = await consultationService.sendMessage(consultation.id, msgText);
+      setMessages((prev) => [...prev, sent]);
+    } catch { /* ignore */ }
     setSending(false);
   };
 
@@ -71,10 +66,7 @@ export function ChatPage() {
           </div>
         )}
         {messages.map((msg) => (
-          <div
-            key={msg.id}
-            className={`${styles.bubble} ${msg.senderRole === 'patient' ? styles.patient : styles.doctor}`}
-          >
+          <div key={msg.id} className={`${styles.bubble} ${msg.senderRole === 'patient' ? styles.patient : styles.doctor}`}>
             <div className={styles.bubbleContent}>{msg.content}</div>
             <div className={styles.bubbleTime}>{formatRelative(msg.createdAt)}</div>
           </div>
@@ -82,16 +74,9 @@ export function ChatPage() {
         <div ref={bottomRef} />
       </div>
       <div className={styles.inputBar}>
-        <input
-          className={styles.input}
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="输入消息..."
-          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-        />
-        <button className={styles.sendBtn} onClick={handleSend} disabled={sending}>
-          ↑
-        </button>
+        <input className={styles.input} value={text} onChange={(e) => setText(e.target.value)}
+          placeholder="输入消息..." onKeyDown={(e) => e.key === 'Enter' && handleSend()} />
+        <button className={styles.sendBtn} onClick={handleSend} disabled={sending}>↑</button>
       </div>
     </div>
   );
diff --git a/frontend-patient/src/services/consultation.service.ts b/frontend-patient/src/services/consultation.service.ts
index b486f77..5f61215 100644
--- a/frontend-patient/src/services/consultation.service.ts
+++ b/frontend-patient/src/services/consultation.service.ts
@@ -82,7 +82,9 @@ export async function getConsultation(doctorId: string): Promise<Consultation |
 }
 
 export async function startConsultation(doctorId: string, subject?: string): Promise<Consultation> {
-  const existing = await getConsultation(doctorId);
+  // Reuse existing active consultation
+  const allRes = await api.get<RawConsultation[]>('/api/consultations');
+  const existing = allRes.data.find((c: RawConsultation) => c.doctorId === doctorId && c.status === 'active');
   if (existing) return existing;
 
   const res = await api.post<RawConsultation>('/api/consultations', {