fix(health): 修复患者端咨询权限+聊天页UI+SVG模板警告
- consultation_handler: create_message/mark_session_read 从 .manage 降为 .list， 患者端只有 list 权限，导致发送消息和标记已读 403 - consultation.ts: 同步后端 DTO doctor_name/patient_name 等缺失字段 - messages/index.tsx: 咨询卡片显示医生姓名替代 consultation_type - consultation/index.tsx: 同步显示 doctor_name - pkg-consultation/detail: 按原型重写聊天页（医生头像+在线状态+非对称气泡+药丸输入栏） - ProgressRing: SVG 替换为 conic-gradient 纯 CSS，消除 tmpl_0_svg 模板警告 - usePageData: stopPullDownRefresh 加 try-catch 防止 DevTools fd race
This commit is contained in:
iven
@@ -161,7 +161,7 @@ export default function Consultation() {
|
||||
<View className='session-body'>
|
||||
<View className='session-top'>
|
||||
<Text className='session-subject'>
|
||||
{session.subject || '在线咨询'}
|
||||
{session.doctor_name || session.subject || '在线咨询'}
|
||||
</Text>
|
||||
<Text className='session-time'>
|
||||
{session.last_message_at
|
||||
|
||||
@@ -143,6 +143,13 @@
|
||||
color: $tx;
|
||||
}
|
||||
|
||||
.consult-type-tag {
|
||||
font-size: var(--tk-font-micro);
|
||||
font-weight: 400;
|
||||
color: $tx3;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.consult-time {
|
||||
font-size: var(--tk-font-micro);
|
||||
color: var(--tk-text-secondary);
|
||||
|
||||
@@ -159,7 +159,8 @@ export default function Messages() {
|
||||
) : (
|
||||
<View className='msg-list'>
|
||||
{sessions.map((session) => {
|
||||
const doctorName = session.last_message?.slice(0, 1) || '医';
|
||||
const displayName = session.doctor_name || '在线咨询';
|
||||
const avatarChar = session.doctor_name?.charAt(0) || '咨';
|
||||
const hasUnread = session.unread_count_patient > 0;
|
||||
return (
|
||||
<ContentCard
|
||||
@@ -169,12 +170,17 @@ export default function Messages() {
|
||||
className={`consult-card ${hasUnread ? '' : 'consult-card-muted'}`}
|
||||
>
|
||||
<View className={`consult-avatar ${hasUnread ? 'consult-avatar-active' : ''}`}>
|
||||
<Text className='consult-avatar-char'>{doctorName}</Text>
|
||||
<Text className='consult-avatar-char'>{avatarChar}</Text>
|
||||
</View>
|
||||
<View className='consult-body'>
|
||||
<View className='consult-row'>
|
||||
<Text className='consult-doctor'>
|
||||
{session.consultation_type === 'online' ? '在线咨询' : '门诊咨询'}
|
||||
{displayName}
|
||||
{session.consultation_type && (
|
||||
<Text className='consult-type-tag'>
|
||||
{session.consultation_type === 'online' ? '在线' : '门诊'}
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
<Text className='consult-time'>{formatTime(session.last_message_at)}</Text>
|
||||
</View>
|
||||
|
||||
@@ -9,223 +9,263 @@
|
||||
}
|
||||
|
||||
/* ─── 导航栏 ─── */
|
||||
.chat-header {
|
||||
.chat-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--tk-gap-sm) var(--tk-gap-md);
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px 12px;
|
||||
background: $card;
|
||||
border-bottom: 1px solid $bd-l;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-header__back {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
z-index: 1;
|
||||
.chat-nav__back {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active {
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-header__back-text {
|
||||
font-size: var(--tk-font-body-sm);
|
||||
color: var(--tk-pri);
|
||||
.chat-nav__back-icon {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
color: $tx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chat-header__center {
|
||||
flex: 1;
|
||||
.chat-nav__center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chat-header__title {
|
||||
font-size: var(--tk-font-body-sm);
|
||||
font-weight: 600;
|
||||
.chat-nav__title {
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: $tx;
|
||||
}
|
||||
|
||||
.chat-header__status {
|
||||
font-size: var(--tk-font-micro);
|
||||
color: $acc;
|
||||
.chat-nav__online {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&--closed {
|
||||
color: $tx3;
|
||||
.chat-nav__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: $acc;
|
||||
}
|
||||
|
||||
.chat-nav__online-text {
|
||||
font-size: 11px;
|
||||
color: $acc;
|
||||
}
|
||||
|
||||
.chat-nav__offline-text {
|
||||
font-size: 11px;
|
||||
color: $tx3;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.chat-nav__more {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active {
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 消息区 ─── */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: var(--tk-gap-md) var(--tk-gap-md) 0;
|
||||
overflow-y: auto;
|
||||
.chat-nav__more-icon {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: $tx3;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.msg-row {
|
||||
/* ─── 消息区域 ─── */
|
||||
.chat-body {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
/* ─── 日期分隔 ─── */
|
||||
.chat-date-pill {
|
||||
display: flex;
|
||||
margin-bottom: var(--tk-gap-md);
|
||||
gap: var(--tk-gap-xs);
|
||||
justify-content: center;
|
||||
margin: 8px 0 12px;
|
||||
|
||||
&__text {
|
||||
font-size: 11px;
|
||||
color: $tx3;
|
||||
background: $surface-alt;
|
||||
padding: 3px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 消息行 ─── */
|
||||
.chat-msg {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&--self {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&--doctor {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 医生头像 ─── */
|
||||
.msg-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $r;
|
||||
background: var(--tk-pri-l);
|
||||
@include flex-center;
|
||||
.chat-msg__avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 18px;
|
||||
background: $pri;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.msg-avatar-char {
|
||||
@include serif-number;
|
||||
font-size: var(--tk-font-cap);
|
||||
font-weight: 700;
|
||||
color: var(--tk-pri);
|
||||
.chat-msg__avatar-char {
|
||||
color: $white;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ─── 消息气泡 ─── */
|
||||
.msg-bubble {
|
||||
max-width: 70%;
|
||||
padding: var(--tk-gap-sm) var(--tk-gap-md);
|
||||
box-shadow: $shadow-sm;
|
||||
.chat-msg__bubble {
|
||||
max-width: 72%;
|
||||
padding: 10px 14px;
|
||||
|
||||
&--other {
|
||||
&--doctor {
|
||||
background: $card;
|
||||
border-radius: $r $r $r $r-xs;
|
||||
border-radius: 4px 16px 16px 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
&--self {
|
||||
background: var(--tk-pri);
|
||||
border-radius: $r $r $r-xs $r;
|
||||
background: $pri-l;
|
||||
border-radius: 16px 4px 16px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-text {
|
||||
font-size: var(--tk-font-cap);
|
||||
.chat-msg__text {
|
||||
font-size: 15px;
|
||||
color: $tx;
|
||||
display: block;
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
|
||||
.msg-bubble--self & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-date-divider {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--tk-gap-sm) 0;
|
||||
|
||||
&__text {
|
||||
font-size: var(--tk-font-micro);
|
||||
color: var(--tk-text-secondary);
|
||||
background: $surface-alt;
|
||||
padding: 2px 12px;
|
||||
border-radius: $r-pill;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-truncated-hint {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--tk-gap-sm) 0;
|
||||
|
||||
&__text {
|
||||
font-size: var(--tk-font-micro);
|
||||
color: var(--tk-text-secondary);
|
||||
background: $surface-alt;
|
||||
padding: 2px 12px;
|
||||
border-radius: $r-pill;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-image {
|
||||
.chat-msg__image {
|
||||
width: 200px;
|
||||
border-radius: $r-sm;
|
||||
margin-top: var(--tk-gap-2xs);
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: var(--tk-font-micro);
|
||||
color: var(--tk-text-secondary);
|
||||
display: block;
|
||||
margin-top: var(--tk-gap-2xs);
|
||||
|
||||
.msg-bubble--self & {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-align: right;
|
||||
}
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* ─── 空状态 ─── */
|
||||
.chat-empty {
|
||||
text-align: center;
|
||||
padding: 80px var(--tk-page-padding);
|
||||
padding: 80px 20px;
|
||||
|
||||
&__text {
|
||||
font-size: var(--tk-font-cap);
|
||||
color: var(--tk-text-secondary);
|
||||
font-size: 14px;
|
||||
color: $tx3;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 输入栏 ─── */
|
||||
.chat-input-bar {
|
||||
/* ─── 底部输入栏 ─── */
|
||||
.chat-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px 38px;
|
||||
padding: 10px 16px;
|
||||
padding-bottom: calc(10px + env(safe-area-inset-bottom));
|
||||
background: $card;
|
||||
border-top: 1px solid $bd-l;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--closed {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
.chat-bar__add {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:active {
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-bar__add-icon {
|
||||
font-size: 22px;
|
||||
color: $tx3;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.chat-bar__input {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
background: $bg;
|
||||
border: 1.5px solid $bd;
|
||||
border-radius: $r-lg;
|
||||
height: 40px;
|
||||
background: $surface-alt;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
padding: 0 14px;
|
||||
font-size: var(--tk-font-cap);
|
||||
font-size: 14px;
|
||||
color: $tx;
|
||||
}
|
||||
|
||||
.chat-send-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: $r-lg;
|
||||
background: var(--tk-pri);
|
||||
@include flex-center;
|
||||
.chat-bar__placeholder {
|
||||
color: $tx3;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chat-bar__send {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background: $pri;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 6px rgba($pri, 0.3);
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-send-btn__icon {
|
||||
font-size: var(--tk-font-cap);
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chat-closed-bar {
|
||||
padding: var(--tk-gap-md);
|
||||
text-align: center;
|
||||
background: $card;
|
||||
border-top: 1px solid $bd-l;
|
||||
|
||||
&__text {
|
||||
font-size: var(--tk-font-cap);
|
||||
color: var(--tk-text-secondary);
|
||||
&:active:not(&--disabled) {
|
||||
opacity: var(--tk-touch-feedback-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-bar__send-icon {
|
||||
color: $white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chat-bar__closed-text {
|
||||
font-size: 14px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
@@ -105,11 +105,6 @@ export default function ConsultationDetail() {
|
||||
}
|
||||
};
|
||||
|
||||
const formatTime = (dateStr: string) => {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
|
||||
};
|
||||
|
||||
const getDateLabel = (dateStr: string): string => {
|
||||
const d = new Date(dateStr);
|
||||
const today = new Date();
|
||||
@@ -128,42 +123,49 @@ export default function ConsultationDetail() {
|
||||
|
||||
const isImageUrl = (url: string) => /\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i.test(url);
|
||||
|
||||
// 渲染层面的消息数量上限，防止长对话 DOM 节点过多
|
||||
const hiddenCount = Math.max(0, messages.length - MAX_RENDER_MESSAGES);
|
||||
const renderMessages = hiddenCount > 0 ? messages.slice(-MAX_RENDER_MESSAGES) : messages;
|
||||
|
||||
if (loading) return <Loading />;
|
||||
|
||||
const isOpen = session?.status !== 'closed';
|
||||
const doctorInitial = (session?.subject || '医').charAt(0);
|
||||
const statusLabel = session?.status === 'active' ? '进行中'
|
||||
: session?.status === 'pending' ? '等待接诊'
|
||||
: '已结束';
|
||||
const doctorName = session?.doctor_name || '医生';
|
||||
const avatarChar = doctorName.charAt(0);
|
||||
const isOnline = session?.status === 'active';
|
||||
|
||||
return (
|
||||
<View className={`chat-page ${modeClass}`}>
|
||||
{/* 导航栏 — 对齐设计稿：返回 + 标题 + 副标题 */}
|
||||
<View className='chat-header'>
|
||||
<View className='chat-header__back' onClick={() => Taro.navigateBack()}>
|
||||
<Text className='chat-header__back-text'>‹ 返回</Text>
|
||||
{/* 导航栏 */}
|
||||
<View className='chat-nav'>
|
||||
<View className='chat-nav__back' onClick={() => Taro.navigateBack()}>
|
||||
<Text className='chat-nav__back-icon'>‹</Text>
|
||||
</View>
|
||||
<View className='chat-header__center'>
|
||||
<Text className='chat-header__title'>{session?.subject || '在线咨询'}</Text>
|
||||
<Text className={`chat-header__status ${isOpen ? '' : 'chat-header__status--closed'}`}>
|
||||
{statusLabel}
|
||||
</Text>
|
||||
<View className='chat-nav__center'>
|
||||
<Text className='chat-nav__title'>{doctorName}</Text>
|
||||
{isOnline ? (
|
||||
<View className='chat-nav__online'>
|
||||
<View className='chat-nav__dot' />
|
||||
<Text className='chat-nav__online-text'>在线</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text className='chat-nav__offline-text'>离线</Text>
|
||||
)}
|
||||
</View>
|
||||
<View className='chat-nav__more'>
|
||||
<Text className='chat-nav__more-icon'>···</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 消息区域 */}
|
||||
<ScrollView
|
||||
scrollY
|
||||
className='chat-messages'
|
||||
className='chat-body'
|
||||
scrollIntoView={scrollViewRef.current}
|
||||
scrollWithAnimation
|
||||
>
|
||||
{hiddenCount > 0 && (
|
||||
<View className='msg-truncated-hint'>
|
||||
<Text className='msg-truncated-hint__text'>已隐藏较早的 {hiddenCount} 条消息</Text>
|
||||
<View className='chat-date-pill'>
|
||||
<Text className='chat-date-pill__text'>已隐藏较早的 {hiddenCount} 条消息</Text>
|
||||
</View>
|
||||
)}
|
||||
{renderMessages.map((msg, idx) => {
|
||||
@@ -172,28 +174,27 @@ export default function ConsultationDetail() {
|
||||
return (
|
||||
<View key={msg.id}>
|
||||
{showDateDivider && (
|
||||
<View className='msg-date-divider'>
|
||||
<Text className='msg-date-divider__text'>{getDateLabel(msg.created_at)}</Text>
|
||||
<View className='chat-date-pill'>
|
||||
<Text className='chat-date-pill__text'>{getDateLabel(msg.created_at)}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View id={`msg-${hiddenCount + idx + 1}`} className={`msg-row ${isSelf ? 'msg-row--self' : ''}`}>
|
||||
<View id={`msg-${hiddenCount + idx + 1}`} className={`chat-msg ${isSelf ? 'chat-msg--self' : 'chat-msg--doctor'}`}>
|
||||
{!isSelf && (
|
||||
<View className='msg-avatar'>
|
||||
<Text className='msg-avatar-char'>{doctorInitial}</Text>
|
||||
<View className='chat-msg__avatar'>
|
||||
<Text className='chat-msg__avatar-char'>{avatarChar}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className={`msg-bubble ${isSelf ? 'msg-bubble--self' : 'msg-bubble--other'}`}>
|
||||
<View className={`chat-msg__bubble ${isSelf ? 'chat-msg__bubble--self' : 'chat-msg__bubble--doctor'}`}>
|
||||
{isImageUrl(msg.content) ? (
|
||||
<Image
|
||||
className='msg-image'
|
||||
className='chat-msg__image'
|
||||
src={msg.content}
|
||||
mode='widthFix'
|
||||
onClick={() => Taro.previewImage({ urls: [msg.content], current: msg.content })}
|
||||
/>
|
||||
) : (
|
||||
<Text className='msg-text'>{msg.content}</Text>
|
||||
<Text className='chat-msg__text'>{msg.content}</Text>
|
||||
)}
|
||||
<Text className='msg-time'>{formatTime(msg.created_at)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
@@ -206,11 +207,16 @@ export default function ConsultationDetail() {
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部输入栏 */}
|
||||
{isOpen ? (
|
||||
<View className='chat-input-bar'>
|
||||
<View className='chat-bar'>
|
||||
<View className='chat-bar__add'>
|
||||
<Text className='chat-bar__add-icon'>+</Text>
|
||||
</View>
|
||||
<Input
|
||||
className='chat-input'
|
||||
className='chat-bar__input'
|
||||
placeholder='输入消息...'
|
||||
placeholderClass='chat-bar__placeholder'
|
||||
value={inputText}
|
||||
onInput={(e) => setInputText(e.detail.value)}
|
||||
confirmType='send'
|
||||
@@ -218,15 +224,15 @@ export default function ConsultationDetail() {
|
||||
disabled={sending}
|
||||
/>
|
||||
<View
|
||||
className={`chat-send-btn ${(!inputText.trim() || sending) ? 'chat-send-btn--disabled' : ''}`}
|
||||
className={`chat-bar__send ${(!inputText.trim() || sending) ? 'chat-bar__send--disabled' : ''}`}
|
||||
onClick={handleSend}
|
||||
>
|
||||
<Text className='chat-send-btn__icon'>发</Text>
|
||||
<Text className='chat-bar__send-icon'>›</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View className='chat-closed-bar'>
|
||||
<Text className='chat-closed-bar__text'>会话已关闭</Text>
|
||||
<View className='chat-bar chat-bar--closed'>
|
||||
<Text className='chat-bar__closed-text'>会话已关闭</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
Reference in New Issue
Block a user