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

fix(mp): T40 UI 审查全量修复 + 设计体系一致性优化

Browse Source 
Phase 0 基础设施:
- statusTag.ts: getStatusInlineStyle() 移除内联 borderRadius/padding/fontSize，仅返回 {background, color}
- 新增 SEVERITY_COLORS + getSeverityStyle() + getSeverityLabel() 统一告警严重程度样式
- variables.scss: 新增 9 个语义颜色别名 ($success/$danger/$warning/$info 等)
- mixins.scss: 新增 status-inline mixin 统一状态标签样式
- 7 个消费者页面添加 @include status-inline CSS 补偿

Phase 1 HIGH 修复 (4 页面):
- P46 随访管理: 移除 getTypeStyle() 硬编码 fontSize，替换文字 Loading 为组件
- P45 咨询详情医护: 添加 Loading/ErrorState 三态模板 + error ref
- P02 健康数据: 添加 loading ref + Loading 组件 + 错误 toast 提示
- P48 告警中心: 替换本地 SEVERITY_COLORS/SEVERITY_LABELS 为 statusTag.ts 导出

Phase 2 全局一致性:
- 2.1 触控补全: 17 页面为可点击元素添加 min-height: $touch-min
- 2.2 字号替换: 19 文件 31 处硬编码 px → Design Token CSS 变量
- 2.3 颜色替换: 18 文件 ~50 处硬编码十六进制 → SCSS 语义变量
- 2.4 elder-mode.scss: 新增 9 个选择器到触控放大清单

Phase 3 LOW 修复:
- 3.1 统一 Loading: 21 页面旧式文字加载 → <Loading> 组件
- 3.2 useElderClass: 8 页面补全长者模式 class 绑定
- 3.3 零散修复: 按钮 44px→48px，诊断记录添加 scroll-view 无限加载

同时新增 UniApp (Vue 3 + Vite) 小程序完整代码库 (146 文件)
This commit is contained in:
iven
2026-05-15 11:22:51 +08:00
parent 18fa6ce6d4
commit 2c567bd772
147 changed files with 36561 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
apps/miniprogram-uniapp/src/pages-sub/doctor/consultation/detail/index.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<view :class="['chat-page', elderClass]">
<!-- Header -->
<view class="chat-header">
<text class="chat-header__title">{{ session?.subject || '在线咨询' }}</text>
<text v-if="isOpen" class="chat-header__close" @tap="handleClose">关闭会话</text>
</view>
<!-- Loading -->
<Loading v-if="loading" text="加载中..." />
<!-- Error -->
<ErrorState v-else-if="error" :text="error" @retry="loadData" />
<!-- 消息列表 -->
<scroll-view v-else
scroll-y
class="chat-messages"
:scroll-into-view="scrollInto"
scroll-with-animation
>
<template v-if="messages.length > 0">
<view
v-for="(msg, idx) in messages"
:key="msg.id"
:id="`msg-${idx + 1}`"
:class="['msg-row', msg.sender_role === 'doctor' ? 'msg-row--self' : '']"
>
<view :class="['msg-bubble', msg.sender_role === 'doctor' ? 'msg-bubble--self' : 'msg-bubble--other']">
<text class="msg-text">{{ msg.content }}</text>
<text class="msg-time">{{ formatTime(msg.created_at) }}</text>
</view>
</view>
</template>
<view v-else class="chat-empty">
<text class="chat-empty__text">暂无消息，发送第一条消息开始对话</text>
</view>
</scroll-view>
<!-- 输入栏（会话进行中） -->
<view v-if="!loading && !error && isOpen" class="chat-input-bar">
<input
class="chat-input"
placeholder="输入消息..."
:value="inputText"
@input="(e: any) => inputText = e.detail.value"
confirm-type="send"
@confirm="handleSend"
:disabled="sending"
/>
<view
:class="['chat-send-btn', (!inputText.trim() || sending) ? 'chat-send-btn--disabled' : '']"
@tap="handleSend"
>
<text class="chat-send-btn__text">{{ sending ? '...' : '发送' }}</text>
</view>
</view>
<!-- 已关闭提示 -->
<view v-else-if="!loading && !error" class="chat-closed-bar">
<text class="chat-closed-bar__text">会话已关闭</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import * as doctorApi from '@/services/doctor'
import { useElderClass } from '@/composables/useElderClass'
import Loading from '@/components/Loading.vue'
import ErrorState from '@/components/ErrorState.vue'
const { elderClass } = useElderClass()
const sessionId = ref('')
const session = ref<doctorApi.ConsultationSession | null>(null)
const messages = ref<doctorApi.ConsultationMessage[]>([])
const inputText = ref('')
const sending = ref(false)
const loading = ref(true)
const error = ref('')
const scrollInto = ref('')
const isOpen = computed(() => session.value?.status !== 'closed')
function formatTime(dateStr: string): string {
const d = new Date(dateStr)
const h = String(d.getHours()).padStart(2, '0')
const m = String(d.getMinutes()).padStart(2, '0')
return `${h}:${m}`
}
function scrollToBottom(count: number) {
nextTick(() => {
scrollInto.value = `msg-${count}`
})
}
async function loadData() {
if (!sessionId.value) return
loading.value = true
error.value = ''
try {
const [s, m] = await Promise.all([
doctorApi.getSession(sessionId.value),
doctorApi.listMessages(sessionId.value, { page: 1, page_size: 50 }),
])
session.value = s
messages.value = m.data || []
scrollToBottom(messages.value.length)
} catch {
error.value = '加载失败，请重试'
} finally {
loading.value = false
}
}
async function markRead() {
if (!sessionId.value) return
try {
await doctorApi.markSessionRead(sessionId.value)
} catch {
// 静默忽略
}
}
async function handleSend() {
const text = inputText.value.trim()
if (!text || sending.value) return
sending.value = true
inputText.value = ''
try {
const msg = await doctorApi.sendMessage(sessionId.value, text)
messages.value = [...messages.value, msg]
scrollToBottom(messages.value.length)
} catch {
uni.showToast({ title: '发送失败', icon: 'none' })
inputText.value = text
} finally {
sending.value = false
}
}
function handleClose() {
uni.showModal({
title: '确认关闭',
content: '关闭后将无法继续对话，确认关闭？',
success: async (res) => {
if (res.confirm) {
try {
await doctorApi.closeSession(sessionId.value, session.value?.version ?? 0)
uni.showToast({ title: '已关闭', icon: 'success' })
loadData()
} catch {
uni.showToast({ title: '操作失败', icon: 'none' })
}
}
},
})
}
onLoad((query) => {
sessionId.value = query?.id || ''
if (sessionId.value) {
loadData()
markRead()
}
})
</script>
<style lang="scss" scoped>
.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 $bd;
&__title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-h1);
font-weight: 600;
color: $tx;
}
&__close {
font-size: var(--tk-font-body);
color: $dan;
padding: 8px 16px;
}
}
.chat-messages {
flex: 1;
padding: 24px;
}
.msg-row {
display: flex;
margin-bottom: 20px;
&--self {
justify-content: flex-end;
}
}
.msg-bubble {
max-width: 70%;
padding: 20px 24px;
border-radius: $r-lg;
position: relative;
&--other {
background: $card;
border-top-left-radius: 4px;
}
&--self {
background: $pri;
border-top-right-radius: 4px;
}
}
.msg-text {
font-size: var(--tk-font-body-lg);
color: $tx;
display: block;
line-height: 1.6;
word-break: break-all;
.msg-bubble--self & {
color: $card;
}
}
.msg-time {
@include serif-number;
font-size: var(--tk-font-body-sm);
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: var(--tk-font-body);
color: $tx3;
}
}
.chat-input-bar {
display: flex;
align-items: center;
padding: 16px 24px;
background: $card;
border-top: 1px solid $bd;
@include safe-bottom;
}
.chat-input {
flex: 1;
background: $bd-l;
border-radius: $r;
padding: 16px 20px;
font-size: var(--tk-font-body-lg);
margin-right: 16px;
}
.chat-send-btn {
background: $pri;
border-radius: $r;
padding: 16px 28px;
flex-shrink: 0;
&--disabled {
opacity: 0.5;
}
&__text {
font-size: var(--tk-font-body-lg);
color: $card;
font-weight: 500;
}
}
.chat-closed-bar {
padding: 24px;
text-align: center;
background: $card;
border-top: 1px solid $bd;
&__text {
font-size: var(--tk-font-body);
color: $tx3;
}
}
</style>

278
apps/miniprogram-uniapp/src/pages-sub/doctor/consultation/index.vue Normal file
View File

@@ -0,0 +1,278 @@
<template>
<scroll-view scroll-y :class="['consultation-page', elderClass]">
<!-- Tab 筛选 -->
<view class="tabs">
<view
v-for="t in TABS"
:key="t.key"
:class="['tab', activeTab === t.key ? 'tab--active' : '']"
@tap="handleTabChange(t.key)"
>
<text>{{ t.label }}</text>
</view>
</view>
<!-- 加载态 -->
<Loading v-if="loading && sessions.length === 0" text="加载中..." />
<!-- 空态 -->
<EmptyState v-else-if="sessions.length === 0" icon="💬" title="暂无咨询会话" />
<!-- 会话列表 -->
<view v-else class="session-list">
<view
v-for="s in sessions"
:key="s.id"
class="session-card"
@tap="goDetail(s.id)"
>
<view class="session-card__top">
<text class="session-card__subject">{{ s.subject || '在线咨询' }}</text>
<view class="session-card__status" :style="getStatusInlineStyle(s.status)">
<text class="session-card__status-text">{{ getStatusLabel(s.status) }}</text>
</view>
</view>
<view class="session-card__info">
<text class="session-card__type">
{{ s.consultation_type === 'text' ? '图文' : s.consultation_type === 'video' ? '视频' : '咨询' }}
</text>
<text class="session-card__time">{{ formatTime(s.last_message_at) }}</text>
</view>
<text v-if="s.last_message" class="session-card__preview">{{ s.last_message }}</text>
<view v-if="(s.unread_count_doctor ?? 0) > 0" class="session-card__badge">
<text class="session-card__badge-text">{{ s.unread_count_doctor }}</text>
</view>
</view>
</view>
<!-- 分页 -->
<view v-if="total > 20" class="pagination">
<text
:class="['pagination__btn', page <= 1 ? 'disabled' : '']"
@tap="page > 1 && (page = page - 1)"
>上一页</text>
<text class="pagination__info">{{ page }} / {{ totalPages }}</text>
<text
:class="['pagination__btn', page >= totalPages ? 'disabled' : '']"
@tap="page < totalPages && (page = page + 1)"
>下一页</text>
</view>
</scroll-view>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import * as doctorApi from '@/services/doctor'
import { useElderClass } from '@/composables/useElderClass'
import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag'
import { formatDate } from '@/utils/date'
import Loading from '@/components/Loading.vue'
import EmptyState from '@/components/EmptyState.vue'
const TABS = [
{ key: '', label: '全部' },
{ key: 'active', label: '进行中' },
{ key: 'waiting', label: '等待中' },
{ key: 'closed', label: '已关闭' },
] as const
const { elderClass } = useElderClass()
const sessions = ref<doctorApi.ConsultationSession[]>([])
const activeTab = ref('')
const loading = ref(true)
const total = ref(0)
const page = ref(1)
const totalPages = computed(() => Math.ceil(total.value / 20))
function goDetail(id: string) {
uni.navigateTo({ url: `/pages-sub/doctor/consultation/detail/index?id=${id}` })
}
function handleTabChange(key: string) {
activeTab.value = key
page.value = 1
}
function formatTime(dateStr?: string | null): string {
if (!dateStr) return ''
return formatDate(dateStr, 'MM-DD HH:mm')
}
async function loadSessions() {
loading.value = true
try {
const res = await doctorApi.listSessions({
page: page.value,
page_size: 20,
status: activeTab.value || undefined,
})
sessions.value = res.data || []
total.value = res.total || 0
} catch {
uni.showToast({ title: '加载失败', icon: 'none' })
} finally {
loading.value = false
}
}
watch([page, activeTab], () => { loadSessions() })
onShow(() => {
loadSessions()
})
</script>
<style lang="scss" scoped>
.consultation-page {
min-height: 100vh;
background: $bg;
}
.tabs {
display: flex;
background: $card;
padding: 0 16px;
border-bottom: 1px solid $bd;
}
.tab {
flex: 1;
text-align: center;
padding: 24px 0;
font-size: var(--tk-font-body-lg);
color: $tx2;
position: relative;
&--active {
color: $pri;
font-weight: 600;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 30%;
right: 30%;
height: 4px;
background: $pri;
border-radius: $r-xs;
}
}
}
.session-list {
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.session-card {
@include card;
position: relative;
&:active {
background: $bd-l;
}
&__top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
&__subject {
font-size: var(--tk-font-body-lg);
font-weight: 600;
color: $tx;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 16px;
}
&__status {
display: inline-block;
border-radius: 6px;
padding: 2px 8px;
flex-shrink: 0;
}
&__status-text {
font-size: var(--tk-font-body);
font-weight: 500;
}
&__info {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 8px;
}
&__type {
@include tag($pri-l, $pri);
}
&__time {
font-size: var(--tk-font-body-sm);
color: $tx3;
}
&__preview {
font-size: var(--tk-font-body);
color: $tx2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
&__badge {
position: absolute;
top: 20px;
right: 20px;
min-width: 36px;
height: 36px;
background: $dan;
border-radius: $r-pill;
@include flex-center;
padding: 0 8px;
}
&__badge-text {
@include serif-number;
font-size: var(--tk-font-body);
color: $card;
font-weight: 600;
}
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
padding: 24px;
&__btn {
font-size: var(--tk-font-body);
color: $pri;
padding: 12px 24px;
&.disabled {
color: $tx3;
}
}
&__info {
font-size: var(--tk-font-body-sm);
color: $tx2;
}
}
</style>