refactor: single doctor, direct chat, any phone login, UI polish, fix animations

2026-05-21 16:05:21 +08:00
parent bec65959a7
commit 0df75c35e9
8 changed files with 110 additions and 102 deletions
--- a/backend/src/HealthManager.WebApi/Controllers/AuthController.cs
+++ b/backend/src/HealthManager.WebApi/Controllers/AuthController.cs
@@ -26,9 +26,20 @@ public class AuthController(
    {
        var user = await authService.GetUserByPhoneAsync(request.Phone);
        if (user == null)
-            return Unauthorized(new { message = "用户不存在" });
+        {
+            // Demo: auto-register new users
+            var db = HttpContext.RequestServices.GetRequiredService<Infrastructure.Data.AppDbContext>();
+            user = new User
+            {
+                Phone = request.Phone,
+                Name = "用户" + request.Phone[^4..],
+                Role = "patient",
+                PasswordHash = AuthService.HashPassword("demo123"),
+            };
+            db.Users.Add(user);
+            await db.SaveChangesAsync();
+        }

-        // Demo: accept any SMS code
        var accessToken = jwtProvider.GenerateAccessToken(user.Id, user.Name, user.Role);
        var refreshToken = jwtProvider.GenerateRefreshToken();
        await authService.SaveRefreshTokenAsync(user.Id, refreshToken, DateTime.UtcNow.AddDays(7));
--- a/frontend-patient/src/assets/styles/variables.css
+++ b/frontend-patient/src/assets/styles/variables.css
@@ -1,10 +1,10 @@
 :root {
-  /* Primary - Medical Blue */
-  --color-primary: #1E6BFF;
-  --color-primary-light: #4D8FFF;
-  --color-primary-dark: #1055E0;
-  --color-primary-bg: #EBF3FF;
-  --color-primary-gradient: linear-gradient(135deg, #1E6BFF, #4D8FFF);
+  /* Primary - Rich Medical Blue */
+  --color-primary: #2563EB;
+  --color-primary-light: #3B82F6;
+  --color-primary-dark: #1D4ED8;
+  --color-primary-bg: #EFF6FF;
+  --color-primary-gradient: linear-gradient(135deg, #2563EB, #4F8AF8);

  /* Status */
  --color-success: #10B981;
@@ -14,20 +14,15 @@
  --color-danger: #EF4444;
  --color-danger-bg: #FEF2F2;

-  /* Risk */
-  --color-risk-normal: #10B981;
-  --color-risk-attention: #F59E0B;
-  --color-risk-abnormal: #EF4444;
-
  /* Neutral */
  --color-white: #FFFFFF;
-  --color-bg: #F2F5FA;
-  --color-bg-secondary: #E8ECF2;
-  --color-border: #E2E8F0;
-  --color-border-light: #F0F2F5;
+  --color-bg: #F4F6FA;
+  --color-bg-secondary: #EBEEF3;
+  --color-border: #E4E7EC;
+  --color-border-light: #F0F1F4;

  /* Text */
-  --color-text-primary: #1A1D28;
+  --color-text-primary: #1A1E2B;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-text-inverse: #FFFFFF;
@@ -46,16 +41,17 @@
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
+  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
-  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08);
+  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 16px rgba(0,0,0,0.07);
+  --shadow-lg: 0 8px 32px rgba(0,0,0,0.09);

  /* Font */
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
-    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
--- a/frontend-patient/src/components/layout/AppLayout.tsx
+++ b/frontend-patient/src/components/layout/AppLayout.tsx
@@ -9,13 +9,12 @@ export function AppLayout() {
  return (
    <div className={styles.layout}>
      <main className={styles.main}>
-        <AnimatePresence mode="wait">
+        <AnimatePresence>
          <motion.div
            key={location.pathname}
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -8 }}
-            transition={{ duration: 0.15, ease: 'easeOut' }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.12 }}
          >
            <Outlet />
          </motion.div>
--- a/frontend-patient/src/components/layout/StackLayout.tsx
+++ b/frontend-patient/src/components/layout/StackLayout.tsx
@@ -5,13 +5,13 @@ export function StackLayout() {
  const location = useLocation();

  return (
-    <AnimatePresence mode="wait">
+    <AnimatePresence>
      <motion.div
        key={location.pathname}
-        initial={{ opacity: 0, x: 40 }}
-        animate={{ opacity: 1, x: 0 }}
-        exit={{ opacity: 0, x: -40 }}
-        transition={{ duration: 0.2, ease: 'easeOut' }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.15 }}
      >
        <Outlet />
      </motion.div>
--- a/frontend-patient/src/pages/home/HomePage.module.css
+++ b/frontend-patient/src/pages/home/HomePage.module.css
@@ -7,36 +7,42 @@
  display: flex;
  align-items: center;
  justify-content: center;
+  background: var(--color-white);
+  border-radius: 50%;
+  box-shadow: var(--shadow-xs);
 }

 .overviewCard {
  margin-bottom: 16px;
-  background: linear-gradient(135deg, #1E6BFF, #4D8FFF);
+  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 40%, #5B9AFF 100%);
  color: #fff;
+  border-radius: var(--radius-xl);
+  padding: 20px;
+  overflow: hidden;
 }

 .overviewHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }

 .overviewTitle {
  font-size: var(--font-size-md);
  font-weight: 600;
-  color: #fff;
+  opacity: 0.9;
 }

 .overviewTime {
  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
+  opacity: 0.7;
 }

 .overviewData {
  display: flex;
  align-items: center;
-  gap: 16px;
+  gap: 20px;
 }

 .bpSection,
@@ -50,7 +56,7 @@

 .dataLabel {
  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
+  opacity: 0.7;
 }

 .bpValues {
@@ -60,63 +66,58 @@
 }

 .bpNum {
-  font-size: var(--font-size-3xl);
+  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
+  color: #fff;
 }

-.risk_normal { color: var(--color-success); }
-.risk_borderline { color: var(--color-warning); }
-.risk_abnormal { color: var(--color-danger); }
-
 .bpSep {
  font-size: var(--font-size-xl);
-  color: var(--color-text-tertiary);
+  opacity: 0.5;
 }

 .hrNum {
-  font-size: var(--font-size-3xl);
+  font-size: 36px;
  font-weight: 700;
-  color: var(--color-text-primary);
  line-height: 1.1;
 }

 .unit {
  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
+  opacity: 0.6;
 }

 .divider {
  width: 1px;
  height: 60px;
-  background: var(--color-border);
+  background: rgba(255,255,255,0.2);
 }

 /* Quick Actions */
 .quickActions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
+  gap: 10px;
  margin-bottom: 16px;
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: 16px;
-  box-shadow: var(--shadow-sm);
 }

 .quickAction {
  display: flex;
  flex-direction: column;
  align-items: center;
-  gap: 6px;
-  padding: 12px 8px;
-  border-radius: var(--radius-md);
-  transition: background 0.15s;
+  gap: 8px;
+  padding: 14px 8px;
+  background: var(--color-white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
 }

 .quickAction:active {
-  background: var(--color-bg);
+  transform: scale(0.96);
+  box-shadow: var(--shadow-md);
 }

 .quickIcon {
@@ -133,6 +134,8 @@
 /* Health Tip */
 .tipCard {
  margin-bottom: 16px;
+  background: linear-gradient(135deg, #FFFBEB, #FFF7ED);
+  border: 1px solid #FDE68A;
 }

 .tipHeader {
@@ -145,7 +148,7 @@
 .tipTitle {
  font-size: var(--font-size-sm);
  font-weight: 600;
-  color: var(--color-text-secondary);
+  color: #92400E;
 }

 .tipHint {
@@ -156,6 +159,6 @@

 .tipContent {
  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+  color: #78350F;
  line-height: 1.6;
 }
--- a/frontend-patient/src/pages/home/HomePage.tsx
+++ b/frontend-patient/src/pages/home/HomePage.tsx
@@ -15,7 +15,7 @@ import styles from './HomePage.module.css';
 const QUICK_ACTIONS = [
  { label: '测血压', icon: '💓', path: '/health/records?type=blood_pressure' },
  { label: '记用药', icon: '💊', path: '/health/medications' },
-  { label: '在线问诊', icon: '👨‍⚕️', path: '/services/consultation' },
+  { label: '在线问诊', icon: '💬', path: '/services/consultation' },
  { label: '报告解读', icon: '📋', path: '/services/reports' },
  { label: '健康日历', icon: '📅', path: '/health/calendar' },
  { label: '运动饮食', icon: '🏃', path: '/health/exercise-diet' },
--- a/frontend-patient/src/pages/services/ChatPage.tsx
+++ b/frontend-patient/src/pages/services/ChatPage.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState, useRef } from 'react';
-import { useParams } from 'react-router-dom';
 import { PageHeader } from '@/components/layout/PageHeader';
 import * as consultationService from '@/services/consultation.service';
 import type { Consultation, ConsultationMessage, Doctor } from '@/types';
@@ -7,7 +6,6 @@ import { formatRelative } from '@/utils/format';
 import styles from './ChatPage.module.css';

 export function ChatPage() {
-  const { doctorId } = useParams<{ doctorId: string }>();
  const [doctor, setDoctor] = useState<Doctor | null>(null);
  const [consultation, setConsultation] = useState<Consultation | null>(null);
  const [messages, setMessages] = useState<ConsultationMessage[]>([]);
@@ -16,36 +14,43 @@ export function ChatPage() {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
-    if (doctorId) {
-      consultationService.getDoctor(doctorId).then((d) => setDoctor(d || null));
-      consultationService.getConsultation(doctorId).then(async (c) => {
+    // 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(doctorId);
+            const newC = await consultationService.startConsultation(doc.id, '在线咨询');
            setConsultation(newC);
          }
        });
      }
-  }, [doctorId]);
+    });
+  }, []);

-  // Fetch messages when consultation is loaded
-  useEffect(() => {
-    if (consultation?.id) {
-      consultationService.getDoctorReply(consultation.id).then(() => {
-        // The messages are fetched as a side effect; fetch them directly
+  const loadMessages = (cid: string) => {
    import('@/services/api-client').then(({ api }) => {
-          api.get<ConsultationMessage[]>(`/api/consultations/${consultation.id}/messages`)
+      api.get<ConsultationMessage[]>(`/api/consultations/${cid}/messages`)
        .then((res) => setMessages(res.data));
    });
-      });
-    }
-  }, [consultation?.id]);
+  };

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

+  useEffect(() => {
+    // Poll for new messages every 3 seconds
+    if (!consultation?.id) return;
+    const timer = setInterval(() => loadMessages(consultation.id), 3000);
+    return () => clearInterval(timer);
+  }, [consultation?.id]);
+
  const handleSend = async () => {
    if (!text.trim() || !consultation || sending) return;
    setSending(true);
@@ -54,22 +59,17 @@ export function ChatPage() {
    const sent = await consultationService.sendMessage(consultation.id, msgText);
    setMessages((prev) => [...prev, sent]);
    setSending(false);
-    // Poll for doctor reply after delay
-    setTimeout(async () => {
-      const reply = await consultationService.getDoctorReply(consultation.id);
-      if (reply) {
-        setMessages((prev) => {
-          if (prev.find((m) => m.id === reply.id)) return prev;
-          return [...prev, reply];
-        });
-      }
-    }, 1500);
  };

  return (
    <div className={styles.page}>
-      <PageHeader title={doctor?.name || '咨询'} />
+      <PageHeader title={doctor?.name || '在线问诊'} />
      <div className={styles.messages}>
+        {messages.length === 0 && (
+          <div style={{ textAlign: 'center', color: '#9CA3AF', marginTop: 40, fontSize: 14 }}>
+            您好，我是{doctor?.name || '医生'}，请问有什么可以帮您？
+          </div>
+        )}
        {messages.map((msg) => (
          <div
            key={msg.id}
@@ -90,7 +90,7 @@ export function ChatPage() {
          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
        />
        <button className={styles.sendBtn} onClick={handleSend} disabled={sending}>
-          {sending ? '...' : '发送'}
+          ↑
        </button>
      </div>
    </div>
--- a/frontend-patient/src/router/index.tsx
+++ b/frontend-patient/src/router/index.tsx
@@ -75,8 +75,7 @@ export const router = createBrowserRouter([
      { path: 'health/medications/add', element: <MedicationEditPage /> },
      { path: 'health/medications/:id', element: <MedicationDetailPage /> },
      { path: 'health/exercise-diet', element: <ExerciseDietPage /> },
-      { path: 'services/consultation', element: <DoctorListPage /> },
-      { path: 'services/consultation/chat/:doctorId', element: <ChatPage /> },
+      { path: 'services/consultation', element: <ChatPage /> },
      { path: 'services/reports', element: <ReportListPage /> },
      { path: 'services/reports/upload', element: <ReportUploadPage /> },
      { path: 'services/reports/:id', element: <ReportDetailPage /> },