feat: 咨询消息轮询优化 — Web 自动刷新 + 患者端聊天详情页

Web 端: - ConsultationDetail 添加 10s 自动轮询新消息（after_id 增量拉取） - consultations API 补充 after_id 参数小程序患者端: - 新增 consultation service 消息 API（listMessages/sendMessage/markSessionRead） - 新增聊天详情页（8s 轮询 + 发送消息 + 自动标记已读） - 咨询列表页点击跳转详情页（替换"即将上线"占位）
2026-04-26 14:40:46 +08:00
parent 4f4a44ddb6
commit 5bb6105127
7 changed files with 400 additions and 4 deletions
--- a/apps/miniprogram/src/app.config.ts
+++ b/apps/miniprogram/src/app.config.ts
@@ -16,6 +16,7 @@ export default defineAppConfig({
    'pages/ai-report/detail/index',
    'pages/followup/detail/index',
    'pages/consultation/index',
+    'pages/consultation/detail/index',
    'pages/mall/index',
    'pages/mall/exchange/index',
    'pages/mall/orders/index',
--- a/apps/miniprogram/src/pages/consultation/detail/index.scss
+++ b/apps/miniprogram/src/pages/consultation/detail/index.scss
@@ -0,0 +1,141 @@
+@import '../../../styles/variables.scss';
+
+.chat-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: $bg;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  background: $card;
+  border-bottom: 1px solid #e2e8f0;
+
+  &__title {
+    font-size: 30px;
+    font-weight: 600;
+    color: $tx;
+  }
+
+  &__status {
+    font-size: 24px;
+    color: $tx3;
+  }
+}
+
+.chat-messages {
+  flex: 1;
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.msg-row {
+  display: flex;
+  margin-bottom: 20px;
+
+  &--self {
+    justify-content: flex-end;
+  }
+}
+
+.msg-bubble {
+  max-width: 70%;
+  padding: 20px 24px;
+  border-radius: 16px;
+  position: relative;
+
+  &--other {
+    background: $card;
+    border-top-left-radius: 4px;
+  }
+
+  &--self {
+    background: $pri;
+    border-top-right-radius: 4px;
+  }
+}
+
+.msg-text {
+  font-size: 28px;
+  color: $tx;
+  display: block;
+  line-height: 1.6;
+  word-break: break-all;
+
+  .msg-bubble--self & {
+    color: #fff;
+  }
+}
+
+.msg-time {
+  font-size: 20px;
+  color: $tx3;
+  display: block;
+  margin-top: 8px;
+  text-align: right;
+
+  .msg-bubble--self & {
+    color: rgba(255, 255, 255, 0.7);
+  }
+}
+
+.chat-empty {
+  text-align: center;
+  padding: 120px 32px;
+
+  &__text {
+    font-size: 26px;
+    color: $tx3;
+  }
+}
+
+.chat-input-bar {
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  background: $card;
+  border-top: 1px solid #e2e8f0;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
+}
+
+.chat-input {
+  flex: 1;
+  background: $bg;
+  border-radius: 12px;
+  padding: 16px 20px;
+  font-size: 28px;
+  margin-right: 16px;
+}
+
+.chat-send-btn {
+  background: $pri;
+  border-radius: 12px;
+  padding: 16px 28px;
+  flex-shrink: 0;
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__text {
+    font-size: 28px;
+    color: #fff;
+    font-weight: 500;
+  }
+}
+
+.chat-closed-bar {
+  padding: 24px;
+  text-align: center;
+  background: $card;
+  border-top: 1px solid #e2e8f0;
+
+  &__text {
+    font-size: 26px;
+    color: $tx3;
+  }
+}
--- a/apps/miniprogram/src/pages/consultation/detail/index.tsx
+++ b/apps/miniprogram/src/pages/consultation/detail/index.tsx
@@ -0,0 +1,181 @@
+import { useState, useEffect, useRef } from 'react';
+import { View, Text, Input, ScrollView } from '@tarojs/components';
+import Taro, { useRouter } from '@tarojs/taro';
+import {
+  getSession,
+  listMessages,
+  sendMessage,
+  markSessionRead,
+  type ConsultationSession,
+  type ConsultationMessage,
+} from '@/services/consultation';
+import Loading from '@/components/Loading';
+import './index.scss';
+
+const POLL_INTERVAL = 8000;
+
+export default function ConsultationDetail() {
+  const router = useRouter();
+  const sessionId = router.params.id || '';
+  const [session, setSession] = useState<ConsultationSession | null>(null);
+  const [messages, setMessages] = useState<ConsultationMessage[]>([]);
+  const [inputText, setInputText] = useState('');
+  const [sending, setSending] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const scrollViewRef = useRef('');
+  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (sessionId) {
+      loadData();
+      markRead();
+      startPolling();
+    }
+    return () => stopPolling();
+  }, [sessionId]);
+
+  const startPolling = () => {
+    stopPolling();
+    pollTimerRef.current = setInterval(pollNewMessages, POLL_INTERVAL);
+  };
+
+  const stopPolling = () => {
+    if (pollTimerRef.current) {
+      clearInterval(pollTimerRef.current);
+      pollTimerRef.current = null;
+    }
+  };
+
+  const pollNewMessages = async () => {
+    if (!session || session.status === 'closed') {
+      stopPolling();
+      return;
+    }
+    try {
+      const lastId = messages.length > 0 ? messages[messages.length - 1].id : undefined;
+      const m = await listMessages(sessionId, {
+        page: 1,
+        page_size: 50,
+        after_id: lastId,
+      });
+      const newMsgs = m.data || [];
+      if (newMsgs.length > 0) {
+        setMessages((prev) => {
+          const existing = new Set(prev.map((msg) => msg.id));
+          const fresh = newMsgs.filter((msg) => !existing.has(msg.id));
+          return [...prev, ...fresh];
+        });
+        scrollViewRef.current = `msg-${messages.length + newMsgs.length}`;
+      }
+    } catch { /* 轮询失败静默忽略 */ }
+  };
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [s, m] = await Promise.all([
+        getSession(sessionId),
+        listMessages(sessionId, { page: 1, page_size: 50 }),
+      ]);
+      setSession(s);
+      setMessages(m.data || []);
+      scrollViewRef.current = `msg-${(m.data || []).length}`;
+      if (s.status === 'closed') stopPolling();
+    } catch {
+      Taro.showToast({ title: '加载失败', icon: 'none' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const markRead = async () => {
+    try {
+      await markSessionRead(sessionId);
+    } catch { /* ignore */ }
+  };
+
+  const handleSend = async () => {
+    const text = inputText.trim();
+    if (!text || sending) return;
+    setSending(true);
+    setInputText('');
+    try {
+      const msg = await sendMessage(sessionId, text);
+      setMessages((prev) => [...prev, msg]);
+      scrollViewRef.current = `msg-${messages.length + 1}`;
+    } catch {
+      Taro.showToast({ title: '发送失败', icon: 'none' });
+      setInputText(text);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const formatTime = (dateStr: string) => {
+    const d = new Date(dateStr);
+    return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+  };
+
+  if (loading) return <Loading />;
+
+  const isOpen = session?.status !== 'closed';
+
+  return (
+    <View className='chat-page'>
+      <View className='chat-header'>
+        <Text className='chat-header__title'>{session?.subject || '在线咨询'}</Text>
+        {!isOpen && (
+          <Text className='chat-header__status'>已结束</Text>
+        )}
+      </View>
+
+      <ScrollView
+        scrollY
+        className='chat-messages'
+        scrollIntoView={scrollViewRef.current}
+        scrollWithAnimation
+      >
+        {messages.map((msg, idx) => {
+          const isSelf = msg.sender_role === 'patient';
+          return (
+            <View key={msg.id} id={`msg-${idx + 1}`} className={`msg-row ${isSelf ? 'msg-row--self' : ''}`}>
+              <View className={`msg-bubble ${isSelf ? 'msg-bubble--self' : 'msg-bubble--other'}`}>
+                <Text className='msg-text'>{msg.content}</Text>
+                <Text className='msg-time'>{formatTime(msg.created_at)}</Text>
+              </View>
+            </View>
+          );
+        })}
+        {messages.length === 0 && (
+          <View className='chat-empty'>
+            <Text className='chat-empty__text'>暂无消息，发送第一条消息开始对话</Text>
+          </View>
+        )}
+      </ScrollView>
+
+      {isOpen ? (
+        <View className='chat-input-bar'>
+          <Input
+            className='chat-input'
+            placeholder='输入消息...'
+            value={inputText}
+            onInput={(e) => setInputText(e.detail.value)}
+            confirmType='send'
+            onConfirm={handleSend}
+            disabled={sending}
+          />
+          <View
+            className={`chat-send-btn ${(!inputText.trim() || sending) ? 'chat-send-btn--disabled' : ''}`}
+            onClick={handleSend}
+          >
+            <Text className='chat-send-btn__text'>{sending ? '...' : '发送'}</Text>
+          </View>
+        </View>
+      ) : (
+        <View className='chat-closed-bar'>
+          <Text className='chat-closed-bar__text'>会话已关闭</Text>
+        </View>
+      )}
+    </View>
+  );
+}
--- a/apps/miniprogram/src/pages/consultation/index.tsx
+++ b/apps/miniprogram/src/pages/consultation/index.tsx
@@ -70,8 +70,8 @@ export default function Consultation() {
    });
  });

-  const handleTapSession = (_session: ConsultationSession) => {
-    Taro.showToast({ title: '即将上线', icon: 'none' });
+  const handleTapSession = (session: ConsultationSession) => {
+    Taro.navigateTo({ url: `/pages/consultation/detail/index?id=${session.id}` });
  };

  return (
@@ -93,7 +93,7 @@ export default function Consultation() {
        <View className='consultation-empty'>
          <Text className='consultation-empty-icon'>💬</Text>
          <Text className='consultation-empty-text'>暂无咨询记录</Text>
-          <Text className='consultation-empty-hint'>在线咨询功能即将上线，敬请期待</Text>
+          <Text className='consultation-empty-hint'>发起咨询后即可在这里与医生交流</Text>
        </View>
      ) : (
        <View className='consultation-list'>
--- a/apps/miniprogram/src/services/consultation.ts
+++ b/apps/miniprogram/src/services/consultation.ts
@@ -13,6 +13,17 @@ export interface ConsultationSession {
  created_at: string;
 }

+export interface ConsultationMessage {
+  id: string;
+  session_id: string;
+  sender_id: string;
+  sender_role: string;
+  content_type: string;
+  content: string;
+  is_read: boolean;
+  created_at: string;
+}
+
 export async function listConsultations(params?: {
  page?: number;
  page_size?: number;
@@ -22,3 +33,30 @@ export async function listConsultations(params?: {
    params,
  );
 }
+
+export async function getSession(sessionId: string) {
+  return api.get<ConsultationSession>(`/health/consultation-sessions/${sessionId}`);
+}
+
+export async function listMessages(sessionId: string, params?: {
+  page?: number;
+  page_size?: number;
+  after_id?: string;
+}) {
+  return api.get<{ data: ConsultationMessage[]; total: number }>(
+    `/health/consultation-sessions/${sessionId}/messages`,
+    params,
+  );
+}
+
+export async function sendMessage(sessionId: string, content: string, contentType = 'text') {
+  return api.post<ConsultationMessage>('/health/consultation-messages', {
+    session_id: sessionId,
+    content_type: contentType,
+    content,
+  });
+}
+
+export async function markSessionRead(sessionId: string) {
+  return api.put<void>(`/health/consultation-sessions/${sessionId}/read`);
+}
--- a/apps/web/src/api/health/consultations.ts
+++ b/apps/web/src/api/health/consultations.ts
@@ -86,7 +86,7 @@ export const consultationApi = {

  listMessages: async (
    sessionId: string,
-    params: { page?: number; page_size?: number },
+    params: { page?: number; page_size?: number; after_id?: string },
  ) => {
    const { data } = await client.get<{
      success: boolean;
--- a/apps/web/src/pages/health/ConsultationDetail.tsx
+++ b/apps/web/src/pages/health/ConsultationDetail.tsx
@@ -9,6 +9,7 @@ import { useThemeMode } from '../../hooks/useThemeMode';
 import { AuthButton } from '../../components/AuthButton';

 const PAGE_SIZE = 30;
+const POLL_INTERVAL = 10_000;

 function formatTime(value: string): string {
  return new Date(value).toLocaleString('zh-CN', {
@@ -54,6 +55,7 @@ export default function ConsultationDetail() {

  const chatEndRef = useRef<HTMLDivElement>(null);
  const shouldScrollRef = useRef(true);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const isDark = useThemeMode();

@@ -103,6 +105,39 @@ export default function ConsultationDetail() {
    fetchMessages(1, false);
  }, [fetchSession, fetchMessages]);

+  // Poll new messages while session is active
+  useEffect(() => {
+    if (!session || session.status === 'closed') return;
+
+    const stopPolling = () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+    };
+
+    stopPolling();
+    pollRef.current = setInterval(async () => {
+      if (!sessionId) return;
+      try {
+        const lastId = messages.length > 0 ? messages[messages.length - 1].id : undefined;
+        const result = await consultationApi.listMessages(sessionId, {
+          page: 1,
+          page_size: 50,
+          after_id: lastId,
+        });
+        if (result.data.length > 0) {
+          setMessages((prev) => [...prev, ...result.data]);
+          shouldScrollRef.current = true;
+        }
+      } catch {
+        // silent
+      }
+    }, POLL_INTERVAL);
+
+    return stopPolling;
+  }, [session?.status, sessionId, messages.length]);
+
  // Auto-scroll to bottom on new messages
  useEffect(() => {
    if (shouldScrollRef.current && chatEndRef.current) {