jiaolongzhen/soft
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: consultation notifications, profile edit hint, doctor report in Chinese, chat UI polish, tabbar badge

Browse Source
This commit is contained in:
MingNian
2026-05-21 15:40:17 +08:00
parent 3ef25e734f
commit 204bc19ce5
6 changed files with 180 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
backend/src/HealthManager.Application/Services/ConsultationService.cs
View File

@@ -59,6 +59,30 @@ public class ConsultationService(AppDbContext db)
ImageUrl = imageUrl, ImageUrl = imageUrl,
}; };
db.ConsultationMessages.Add(message); db.ConsultationMessages.Add(message);
// Create notification for the recipient
var consultation = await db.Consultations
.Include(c => c.Patient)
.Include(c => c.Doctor)
.FirstOrDefaultAsync(c => c.Id == consultationId);
if (consultation != null)
{
var targetUserId = senderRole == "patient" ? consultation.DoctorId : consultation.PatientId;
var senderName = senderRole == "patient" ? consultation.Patient?.Name : consultation.Doctor?.Name;
var notifyTitle = senderRole == "patient" ? "新患者消息" : "医生已回复";
var notifyContent = $"{senderName ?? "对方"}：{TruncateContent(content)}";
db.Notifications.Add(new Notification
{
UserId = targetUserId,
Type = "consultation",
Title = notifyTitle,
Content = notifyContent,
RelatedId = consultationId,
});
}
await db.SaveChangesAsync(); await db.SaveChangesAsync();
return message; return message;
} }
@@ -70,4 +94,7 @@ public class ConsultationService(AppDbContext db)
query = query.Where(u => u.Department == department); query = query.Where(u => u.Department == department);
return await query.ToListAsync(); return await query.ToListAsync();
} }
private static string TruncateContent(string content) =>
content.Length > 50 ? content[..50] + "..." : content;
} }

172
frontend-doctor/src/pages/reports/ReportDetailPage.tsx
View File

@@ -16,18 +16,20 @@ interface RawItem {
unit?: string; referenceRange?: string; isAbnormal: boolean; unit?: string; referenceRange?: string; isAbnormal: boolean;
} }
const categoryMap: Record<string, string> = {
'血液检查': '血液检查', '心电图': '心电图', '影像学': '影像学', '尿液检查': '尿液检查', '其他': '其他',
'Blood Test': '血液检查', 'ECG': '心电图', 'Imaging': '影像学',
};
export function ReportDetailPage() { export function ReportDetailPage() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const [report, setReport] = useState<RawReport | null>(null); const [report, setReport] = useState<RawReport | null>(null);
const [lightbox, setLightbox] = useState<string | null>(null); const [lightbox, setLightbox] = useState<string | null>(null);
// Interpretation form
const [summary, setSummary] = useState(''); const [summary, setSummary] = useState('');
const [riskLevel, setRiskLevel] = useState('normal'); const [riskLevel, setRiskLevel] = useState('normal');
const [suggestions, setSuggestions] = useState(''); const [suggestions, setSuggestions] = useState('');
const [items, setItems] = useState<{ itemName: string; resultValue: string; unit: string; referenceRange: string; isAbnormal: boolean }[]>([ const [items, setItems] = useState([{ itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false }]);
{ itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false },
]);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
useEffect(() => { useEffect(() => {
@@ -35,51 +37,46 @@ export function ReportDetailPage() {
api.get<RawReport>(`/api/reports/${id}`).then((r) => setReport(r.data)).catch(() => {}); api.get<RawReport>(`/api/reports/${id}`).then((r) => setReport(r.data)).catch(() => {});
}, [id]); }, [id]);
const addItem = () => { const addItem = () => setItems((prev) => [...prev, { itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false }]);
setItems((prev) => [...prev, { itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false }]); const updateItem = (i: number, field: string, value: string | boolean) =>
}; setItems((prev) => prev.map((it, idx) => idx === i ? { ...it, [field]: value } : it));
const removeItem = (i: number) => { if (items.length > 1) setItems((prev) => prev.filter((_, idx) => idx !== i)); };
const updateItem = (index: number, field: string, value: string | boolean) => {
setItems((prev) => prev.map((item, i) => i === index ? { ...item, [field]: value } : item));
};
const removeItem = (index: number) => {
if (items.length <= 1) return;
setItems((prev) => prev.filter((_, i) => i !== index));
};
const handleInterpret = async () => { const handleInterpret = async () => {
if (!summary.trim() || !id) return; if (!summary.trim() || !id) return;
setSubmitting(true); setSubmitting(true);
try { try {
await api.post(`/api/reports/${id}/interpret`, { await api.post(`/api/reports/${id}/interpret`, {
summary, summary, items: items.filter((it) => it.itemName.trim()), riskLevel,
items: items.filter((it) => it.itemName.trim()),
riskLevel,
suggestions: suggestions || null, suggestions: suggestions || null,
}); });
const updated = await api.get<RawReport>(`/api/reports/${id}`); const updated = await api.get<RawReport>(`/api/reports/${id}`);
setReport(updated.data); setReport(updated.data);
} catch { alert('submit failed'); } } catch { alert('提交失败'); }
finally { setSubmitting(false); } finally { setSubmitting(false); }
}; };
if (!report) return <div style={{ padding: 24 }}>Loading...</div>; if (!report) return <div style={{ padding: 24 }}>加载中...</div>;
const isCompleted = report.status === 'completed'; const isCompleted = report.status === 'completed';
const riskMap: Record<string, { text: string; color: string }> = {
normal: { text: '正常', color: '#2e7d32' },
attention: { text: '关注', color: '#f57c00' },
abnormal: { text: '异常', color: '#c62828' },
};
return ( return (
<div style={{ padding: 24 }}> <div style={{ padding: 24 }}>
<Link to="/reports" style={{ fontSize: 13, color: '#1976d2' }}>&larr; Back to Reports</Link> <Link to="/reports" style={{ fontSize: 13, color: '#1976d2' }}>← 返回报告列表</Link>
<div style={{ background: '#fff', marginTop: 16, padding: 24, borderRadius: 8, boxShadow: '0 1px 4px rgba(0,0,0,0.08)' }}> <div style={{ background: '#fff', marginTop: 16, padding: 24, borderRadius: 8, boxShadow: '0 1px 4px rgba(0,0,0,0.08)' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<div> <div>
<h2 style={{ margin: 0 }}>{report.title}</h2> <h2 style={{ margin: 0 }}>{report.title}</h2>
<div style={{ marginTop: 8, fontSize: 13, color: '#888' }}> <div style={{ marginTop: 8, fontSize: 13, color: '#888' }}>
Patient: {report.patientName || 'unknown'} &nbsp;|&nbsp; 患者：{report.patientName || '未知'} &nbsp;|&nbsp;
Category: {report.category} &nbsp;|&nbsp; 分类：{categoryMap[report.category] || report.category} &nbsp;|&nbsp;
Date: {report.createdAt?.split('T')[0]} 日期：{report.createdAt?.split('T')[0]}
</div> </div>
</div> </div>
<span style={{ <span style={{
@@ -87,68 +84,61 @@ export function ReportDetailPage() {
background: isCompleted ? '#e8f5e9' : '#fff3e0', background: isCompleted ? '#e8f5e9' : '#fff3e0',
color: isCompleted ? '#2e7d32' : '#f57c00', color: isCompleted ? '#2e7d32' : '#f57c00',
}}> }}>
{isCompleted ? 'Completed' : 'Pending Review'} {isCompleted ? '已完成' : '待审核'}
</span> </span>
</div> </div>
{/* Image gallery */} {/* 图片 */}
{report.imageUrls && report.imageUrls.length > 0 && ( {report.imageUrls && report.imageUrls.length > 0 && (
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<h4 style={{ fontSize: 14, marginBottom: 8 }}>Uploaded Images ({report.imageUrls.length})</h4> <h4 style={{ fontSize: 14, marginBottom: 8 }}>上传图片（{report.imageUrls.length}张）</h4>
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
{report.imageUrls.map((url, i) => ( {report.imageUrls.map((url, i) => (
<div <div key={i} onClick={() => setLightbox(url)} style={{
key={i}
onClick={() => setLightbox(url)}
style={{
width: 120, height: 120, borderRadius: 8, overflow: 'hidden', width: 120, height: 120, borderRadius: 8, overflow: 'hidden',
cursor: 'pointer', border: '2px solid #eee', cursor: 'pointer', border: '2px solid #eee', background: '#f5f5f5',
background: '#f5f5f5', display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
}} }}>
> <img src={`http://localhost:5000${url}`} alt={`图片${i}`}
<img
src={`http://localhost:5000${url}`}
alt={`report-${i}`}
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
/>
</div> </div>
))} ))}
</div> </div>
</div> </div>
)} )}
{/* Lightbox */} {/* 灯箱 */}
{lightbox && ( {lightbox && (
<div onClick={() => setLightbox(null)} style={{ <div onClick={() => setLightbox(null)} style={{
position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 999, cursor: 'pointer',
cursor: 'pointer',
}}> }}>
<img src={`http://localhost:5000${lightbox}`} alt="preview" style={{ maxWidth: '90vw', maxHeight: '90vh', borderRadius: 8 }} /> <img src={`http://localhost:5000${lightbox}`} alt="预览" style={{ maxWidth: '90vw', maxHeight: '90vh', borderRadius: 8 }} />
</div> </div>
)} )}
{/* Completed interpretation display */} {/* 已完成解读 */}
{isCompleted && ( {isCompleted && (
<div style={{ marginTop: 20, padding: 16, background: '#e8f5e9', borderRadius: 8 }}> <div style={{ marginTop: 20, padding: 16, background: '#e8f5e9', borderRadius: 8 }}>
<h4 style={{ fontSize: 14, marginBottom: 8 }}>Interpretation Result</h4> <h4 style={{ fontSize: 14, marginBottom: 8 }}>解读结果</h4>
<div style={{ fontSize: 13 }}> <div style={{ fontSize: 13 }}>
<p><strong>Risk Level:</strong> <span style={{ <p><strong>风险等级：</strong>
color: report.riskLevel === 'normal' ? '#2e7d32' : report.riskLevel === 'abnormal' ? '#c62828' : '#f57c00', <span style={{ color: riskMap[report.riskLevel || '']?.color, fontWeight: 600 }}>
fontWeight: 600, {riskMap[report.riskLevel || '']?.text || report.riskLevel || '-'}
}}>{report.riskLevel || '-'}</span></p> </span>
<p><strong>Summary:</strong> {report.summary || '-'}</p> </p>
{report.suggestions && <p><strong>Suggestions:</strong> {report.suggestions}</p>} <p><strong>总结：</strong>{report.summary || '-'}</p>
{report.suggestions && <p><strong>建议：</strong>{report.suggestions}</p>}
</div> </div>
{report.items && report.items.length > 0 && ( {report.items && report.items.length > 0 && (
<table style={{ width: '100%', marginTop: 12, borderCollapse: 'collapse', fontSize: 12 }}> <table style={{ width: '100%', marginTop: 12, borderCollapse: 'collapse', fontSize: 12 }}>
<thead><tr style={{ textAlign: 'left', borderBottom: '2px solid #c8e6c9' }}> <thead><tr style={{ textAlign: 'left', borderBottom: '2px solid #c8e6c9' }}>
<th style={{ padding: '6px 8px' }}>Item</th> <th style={{ padding: '6px 8px' }}>检查项目</th>
<th style={{ padding: '6px 8px' }}>Result</th> <th style={{ padding: '6px 8px' }}>结果</th>
<th style={{ padding: '6px 8px' }}>Reference</th> <th style={{ padding: '6px 8px' }}>参考范围</th>
<th style={{ padding: '6px 8px' }}>Abnormal</th> <th style={{ padding: '6px 8px' }}>是否异常</th>
</tr></thead> </tr></thead>
<tbody> <tbody>
{report.items.map((item) => ( {report.items.map((item) => (
@@ -157,7 +147,7 @@ export function ReportDetailPage() {
<td style={{ padding: '6px 8px' }}>{item.resultValue} {item.unit || ''}</td> <td style={{ padding: '6px 8px' }}>{item.resultValue} {item.unit || ''}</td>
<td style={{ padding: '6px 8px' }}>{item.referenceRange || '-'}</td> <td style={{ padding: '6px 8px' }}>{item.referenceRange || '-'}</td>
<td style={{ padding: '6px 8px', color: item.isAbnormal ? '#c62828' : '#2e7d32', fontWeight: 500 }}> <td style={{ padding: '6px 8px', color: item.isAbnormal ? '#c62828' : '#2e7d32', fontWeight: 500 }}>
{item.isAbnormal ? 'Yes' : 'No'} {item.isAbnormal ? '是' : '否'}
</td> </td>
</tr> </tr>
))} ))}
@@ -167,66 +157,62 @@ export function ReportDetailPage() {
</div> </div>
)} )}
{/* Interpretation form (only for pending reports) */} {/* 解读表单 */}
{!isCompleted && ( {!isCompleted && (
<div style={{ marginTop: 24, borderTop: '1px solid #eee', paddingTop: 20 }}> <div style={{ marginTop: 24, borderTop: '1px solid #eee', paddingTop: 20 }}>
<h3 style={{ fontSize: 15, marginBottom: 16 }}>Doctor Interpretation</h3> <h3 style={{ fontSize: 15, marginBottom: 16 }}>医生解读</h3>
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Summary</label> <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>解读总结</label>
<textarea <textarea value={summary} onChange={(e) => setSummary(e.target.value)}
value={summary} placeholder="请输入您的专业解读总结..."
onChange={(e) => setSummary(e.target.value)}
placeholder="Enter your interpretation summary..."
rows={4} rows={4}
style={{ width: '100%', padding: '10px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, resize: 'vertical', fontFamily: 'inherit', boxSizing: 'border-box' }} style={{ width: '100%', padding: '10px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, resize: 'vertical', fontFamily: 'inherit', boxSizing: 'border-box' }} />
/>
</div> </div>
<div style={{ display: 'flex', gap: 16, marginBottom: 12 }}> <div style={{ display: 'flex', gap: 16, marginBottom: 12 }}>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Risk Level</label> <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>风险等级</label>
<select value={riskLevel} onChange={(e) => setRiskLevel(e.target.value)} <select value={riskLevel} onChange={(e) => setRiskLevel(e.target.value)}
style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit' }}> style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit' }}>
<option value="normal">Normal</option> <option value="normal">正常</option>
<option value="attention">Attention</option> <option value="attention">需关注</option>
<option value="abnormal">Abnormal</option> <option value="abnormal">异常</option>
</select> </select>
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Suggestions</label> <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>医生建议</label>
<input <input value={suggestions} onChange={(e) => setSuggestions(e.target.value)}
value={suggestions} placeholder="如：继续当前用药方案"
onChange={(e) => setSuggestions(e.target.value)} style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit', boxSizing: 'border-box' }} />
placeholder="e.g. Continue current medication"
style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit', boxSizing: 'border-box' }}
/>
</div> </div>
</div> </div>
{/* Test items */}
<div style={{ marginBottom: 12 }}> <div style={{ marginBottom: 12 }}>
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}>Test Items</label> <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}>检查项目</label>
{items.map((item, i) => ( {items.map((item, i) => (
<div key={i} style={{ display: 'flex', gap: 8, marginBottom: 6, alignItems: 'center' }}> <div key={i} style={{ display: 'flex', gap: 8, marginBottom: 6, alignItems: 'center' }}>
<input placeholder="Item name" value={item.itemName} onChange={(e) => updateItem(i, 'itemName', e.target.value)} <input placeholder="项目名称" value={item.itemName} onChange={(e) => updateItem(i, 'itemName', e.target.value)}
style={{ flex: 2, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} /> style={{ flex: 2, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
<input placeholder="Result" value={item.resultValue} onChange={(e) => updateItem(i, 'resultValue', e.target.value)} <input placeholder="结果" value={item.resultValue} onChange={(e) => updateItem(i, 'resultValue', e.target.value)}
style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} /> style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
<input placeholder="Unit" value={item.unit} onChange={(e) => updateItem(i, 'unit', e.target.value)} <input placeholder="单位" value={item.unit} onChange={(e) => updateItem(i, 'unit', e.target.value)}
style={{ width: 80, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} /> style={{ width: 70, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
<input placeholder="Range" value={item.referenceRange} onChange={(e) => updateItem(i, 'referenceRange', e.target.value)} <input placeholder="参考范围" value={item.referenceRange} onChange={(e) => updateItem(i, 'referenceRange', e.target.value)}
style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} /> style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
<label style={{ fontSize: 12, whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 4 }}> <label style={{ fontSize: 12, whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 3 }}>
<input type="checkbox" checked={item.isAbnormal} onChange={(e) => updateItem(i, 'isAbnormal', e.target.checked)} /> <input type="checkbox" checked={item.isAbnormal} onChange={(e) => updateItem(i, 'isAbnormal', e.target.checked)} />
Abnormal 异常
</label> </label>
<button onClick={() => removeItem(i)} style={{ background: 'none', border: 'none', color: '#c62828', cursor: 'pointer', fontSize: 16 }} disabled={items.length <= 1}>✕</button> <button onClick={() => removeItem(i)}
style={{ background: 'none', border: 'none', color: '#c62828', cursor: 'pointer', fontSize: 16 }}
disabled={items.length <= 1}>✕</button>
</div> </div>
))} ))}
<button onClick={addItem} style={{ padding: '4px 12px', border: '1px dashed #1976d2', borderRadius: 4, background: 'none', color: '#1976d2', cursor: 'pointer', fontSize: 12 }}> <button onClick={addItem} style={{
+ Add Item padding: '4px 12px', border: '1px dashed #1976d2', borderRadius: 4,
</button> background: 'none', color: '#1976d2', cursor: 'pointer', fontSize: 12,
}}>+ 添加项目</button>
</div> </div>
<button onClick={handleInterpret} disabled={submitting} style={{ <button onClick={handleInterpret} disabled={submitting} style={{
@@ -234,7 +220,7 @@ export function ReportDetailPage() {
border: 'none', borderRadius: 6, fontSize: 14, cursor: 'pointer', border: 'none', borderRadius: 6, fontSize: 14, cursor: 'pointer',
opacity: submitting ? 0.7 : 1, marginTop: 8, opacity: submitting ? 0.7 : 1, marginTop: 8,
}}> }}>
{submitting ? 'Submitting...' : 'Submit Interpretation'} {submitting ? '提交中...' : '提交解读'}
</button> </button>
</div> </div>
)} )}

22
frontend-patient/src/components/layout/TabBar.module.css
View File

@@ -42,3 +42,25 @@
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
font-weight: 500; font-weight: 500;
} }
.tabIcon {
position: relative;
}
.badge {
position: absolute;
top: -6px;
right: -10px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: #EF4444;
color: #fff;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}

9
frontend-patient/src/components/layout/TabBar.tsx
View File

@@ -1,10 +1,12 @@
import { useNavigate, useLocation } from 'react-router-dom'; import { useNavigate, useLocation } from 'react-router-dom';
import { NAV_ITEMS } from '@/utils/constants'; import { NAV_ITEMS } from '@/utils/constants';
import { useNotificationStore } from '@/stores/notification.store';
import styles from './TabBar.module.css'; import styles from './TabBar.module.css';
export function TabBar() { export function TabBar() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const unreadCount = useNotificationStore((s) => s.unreadCount);
return ( return (
<nav className={styles.tabBar}> <nav className={styles.tabBar}>
@@ -16,7 +18,12 @@ export function TabBar() {
className={`${styles.tab} ${isActive ? styles.tabActive : ''}`} className={`${styles.tab} ${isActive ? styles.tabActive : ''}`}
onClick={() => navigate(item.path)} onClick={() => navigate(item.path)}
> >
<span className={styles.tabIcon}>{item.icon}</span> <span className={styles.tabIcon}>
{item.icon}
{item.path === '/services' && unreadCount > 0 && (
<span className={styles.badge}>{unreadCount > 99 ? '99+' : unreadCount}</span>
)}
</span>
<span className={styles.tabLabel}>{item.label}</span> <span className={styles.tabLabel}>{item.label}</span>
</button> </button>
); );

2
frontend-patient/src/pages/profile/ProfilePage.tsx
View File

@@ -25,7 +25,7 @@ export function ProfilePage() {
<Card className={styles.profileCard} onClick={() => navigate('/profile/edit')}> <Card className={styles.profileCard} onClick={() => navigate('/profile/edit')}>
<div className={styles.avatar}>{user?.nickname?.[0] || '用'}</div> <div className={styles.avatar}>{user?.nickname?.[0] || '用'}</div>
<div className={styles.profileInfo}> <div className={styles.profileInfo}>
<div className={styles.nickname}>{user?.nickname || '用户'} <span className={styles.editHint}>编辑</span></div> <div className={styles.nickname}>{user?.nickname || '用户'} <span className={styles.editHint}>&#8250;</span></div>
<div className={styles.phone}>{user?.phone}</div> <div className={styles.phone}>{user?.phone}</div>
</div> </div>
</Card> </Card>

66
frontend-patient/src/pages/services/ChatPage.module.css
View File

@@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: var(--color-bg); background: #EDF1F7;
} }
.messages { .messages {
@@ -10,74 +10,92 @@
overflow-y: auto; overflow-y: auto;
padding: 16px; padding: 16px;
padding-top: calc(var(--header-height) + 8px); padding-top: calc(var(--header-height) + 8px);
display: flex;
flex-direction: column;
gap: 4px;
} }
.bubble { .bubble {
margin-bottom: 14px; max-width: 78%;
max-width: 80%; animation: bubbleIn 0.25s ease-out;
}
@keyframes bubbleIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} }
.patient { .patient {
margin-left: auto; align-self: flex-end;
text-align: right;
} }
.doctor { .doctor {
margin-right: auto; align-self: flex-start;
} }
.bubbleContent { .bubbleContent {
padding: 10px 14px; padding: 10px 14px;
border-radius: var(--radius-md); border-radius: 18px;
font-size: var(--font-size-sm); font-size: var(--font-size-base);
line-height: 1.5; line-height: 1.5;
display: inline-block; word-break: break-word;
text-align: left;
} }
.patient .bubbleContent { .patient .bubbleContent {
background: var(--color-primary); background: linear-gradient(135deg, #1E6BFF, #4D8FFF);
color: var(--color-text-inverse); color: #fff;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.doctor .bubbleContent { .doctor .bubbleContent {
background: var(--color-white); background: #fff;
color: var(--color-text-primary); color: var(--color-text-primary);
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
box-shadow: var(--shadow-sm); box-shadow: 0 1px 2px rgba(0,0,0,0.06);
} }
.bubbleTime { .bubbleTime {
font-size: 10px; font-size: 10px;
color: var(--color-text-tertiary); color: var(--color-text-tertiary);
margin-top: 4px; margin-top: 4px;
padding: 0 4px;
} }
.patient .bubbleTime { text-align: right; }
.inputBar { .inputBar {
display: flex; display: flex;
gap: 8px; gap: 8px;
padding: 10px 14px; padding: 10px 14px;
background: var(--color-white); background: #fff;
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
padding-bottom: env(safe-area-inset-bottom, 10px); padding-bottom: env(safe-area-inset-bottom, 10px);
} }
.input { .input {
flex: 1; flex: 1;
padding: 10px 14px; padding: 10px 16px;
background: var(--color-bg); background: #EDF1F7;
border-radius: var(--radius-full); border: none;
font-size: var(--font-size-sm); border-radius: 24px;
font-size: var(--font-size-base);
outline: none;
font-family: var(--font-family);
} }
.sendBtn { .sendBtn {
padding: 10px 18px; width: 42px;
height: 42px;
background: var(--color-primary); background: var(--color-primary);
color: var(--color-text-inverse); color: #fff;
border-radius: var(--radius-full); border: none;
font-size: var(--font-size-sm); border-radius: 50%;
font-weight: 500; font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
} }
.sendBtn:disabled { .sendBtn:disabled {