iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(health): 修复患者端咨询权限+聊天页UI+SVG模板警告

Browse Source 
- 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
2026-05-16 22:38:21 +08:00
parent 95e219ad5a
commit 4be28de3ce
10 changed files with 278 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/miniprogram/src/components/ui/ProgressRing/index.scss
View File

@@ -4,9 +4,30 @@
position: relative;
flex-shrink: 0;
&__center {
position: absolute;
inset: 0;
&--sm {
width: 64px;
height: 64px;
}
&--lg {
width: 80px;
height: 80px;
}
&__track {
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
&__inner {
width: calc(100% - 8px);
height: calc(100% - 8px);
border-radius: 50%;
background: $card;
display: flex;
align-items: center;
justify-content: center;

43
apps/miniprogram/src/components/ui/ProgressRing/index.tsx
View File

@@ -15,39 +15,24 @@ const ProgressRing: React.FC<ProgressRingProps> = ({
label,
className = '',
}) => {
const px = size === 'sm' ? 64 : 80;
const r = (px / 2) - 4;
const circumference = 2 * Math.PI * r;
const offset = circumference * (1 - Math.min(progress, 1));
const pct = Math.round(Math.min(progress, 1) * 100);
const deg = (pct / 100) * 360;
const cls = ['progress-ring', `progress-ring--${size}`, className].filter(Boolean).join(' ');
return (
<View className={cls} style={{ width: px, height: px }}>
<svg width={px} height={px} viewBox={`0 0 ${px} ${px}`}>
<circle
cx={px / 2} cy={px / 2} r={r}
fill='none'
stroke='var(--tk-pri-l, #E8E2DC)'
strokeWidth={4}
/>
<circle
cx={px / 2} cy={px / 2} r={r}
fill='none'
stroke='var(--tk-pri)'
strokeWidth={4}
strokeDasharray={circumference}
strokeDashoffset={offset}
strokeLinecap='round'
transform={`rotate(-90 ${px / 2} ${px / 2})`}
/>
</svg>
<View className='progress-ring__center'>
{label ? (
<Text className='progress-ring__label'>{label}</Text>
) : (
<Text className='progress-ring__pct'>{Math.round(progress * 100)}%</Text>
)}
<View className={cls}>
<View
className='progress-ring__track'
style={{ background: `conic-gradient(var(--tk-pri) ${deg}deg, var(--tk-pri-l, #E8E2DC) ${deg}deg)` }}
>
<View className='progress-ring__inner'>
{label ? (
<Text className='progress-ring__label'>{label}</Text>
) : (
<Text className='progress-ring__pct'>{pct}%</Text>
)}
</View>
</View>
</View>
);

2
apps/miniprogram/src/hooks/usePageData.ts
View File

@@ -67,7 +67,7 @@ export function usePageData(
try {
await refresh();
} finally {
Taro.stopPullDownRefresh();
try { Taro.stopPullDownRefresh(); } catch { /* DevTools fd race */ }
}
});

2
apps/miniprogram/src/pages/consultation/index.tsx
View File

@@ -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

7
apps/miniprogram/src/pages/messages/index.scss
View File

@@ -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);

12
apps/miniprogram/src/pages/messages/index.tsx
View File

@@ -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>

304
apps/miniprogram/src/pages/pkg-consultation/detail/index.scss
View File

@@ -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;
}

80
apps/miniprogram/src/pages/pkg-consultation/detail/index.tsx
View File

@@ -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>

5
apps/miniprogram/src/services/consultation.ts
View File

@@ -4,13 +4,18 @@ export interface ConsultationSession {
id: string;
patient_id: string;
doctor_id: string | null;
patient_name?: string | null;
doctor_name?: string | null;
consultation_type: string;
status: string;
subject?: string | null;
last_message?: string | null;
last_message_at: string | null;
unread_count_patient: number;
unread_count_doctor?: number;
created_at: string;
updated_at?: string;
version?: number;
}
export interface ConsultationMessage {

4
crates/erp-health/src/handler/consultation_handler.rs
View File

@@ -191,7 +191,7 @@ where
HealthState: FromRef<S>,
S: Clone + Send + Sync + 'static,
{
require_permission(&ctx, "health.consultation.manage")?;
require_permission(&ctx, "health.consultation.list")?;
// 从 JWT 身份推导 sender_role，不信任客户端输入
let is_doctor = crate::entity::doctor_profile::Entity::find()
.filter(crate::entity::doctor_profile::Column::UserId.eq(ctx.user_id))
@@ -262,7 +262,7 @@ where
HealthState: FromRef<S>,
S: Clone + Send + Sync + 'static,
{
require_permission(&ctx, "health.consultation.manage")?;
require_permission(&ctx, "health.consultation.list")?;
let is_doctor = crate::entity::doctor_profile::Entity::find()
.filter(crate::entity::doctor_profile::Column::UserId.eq(ctx.user_id))
.filter(crate::entity::doctor_profile::Column::TenantId.eq(ctx.tenant_id))