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

435
apps/miniprogram-uniapp/src/pages-sub/doctor/dialysis/create/index.vue Normal file
View File

@@ -0,0 +1,435 @@
<template>
<scroll-view scroll-y :class="['page-scroll', elderClass]">
<view class="page-content">
<!-- 患者选择 -->
<view class="section-card">
<text class="section-title">选择患者</text>
<view class="patient-search">
<input
class="search-input"
placeholder="搜索患者姓名"
:value="patientSearch"
@input="(e: any) => { patientSearch = e.detail.value; searchPatients() }"
/>
</view>
<view v-if="searchingPatient" class="loading-hint">
<text class="loading-hint__text">搜索中...</text>
</view>
<view v-else-if="patientResults.length > 0" class="patient-list">
<view
v-for="p in patientResults"
:key="p.id"
:class="['patient-item', form.patient_id === p.id ? 'patient-item--selected' : '']"
@tap="selectPatient(p)"
>
<text class="patient-item__name">{{ p.name }}</text>
<text class="patient-item__info">{{ p.gender === 'male' ? '男' : p.gender === 'female' ? '女' : '' }}</text>
<view v-if="form.patient_id === p.id" class="patient-item__check">
<text class="check-icon">&#10003;</text>
</view>
</view>
</view>
<view v-else-if="patientSearch && !searchingPatient" class="empty-hint">
<text class="empty-hint__text">未找到患者</text>
</view>
</view>
<!-- 透析信息 -->
<view class="section-card">
<text class="section-title">透析信息</text>
<view class="form-field">
<text class="form-label">透析日期 <text class="required">*</text></text>
<picker mode="date" :value="form.dialysis_date" @change="(e: any) => form.dialysis_date = e.detail.value">
<view :class="['picker-display', form.dialysis_date ? '' : 'placeholder']">
{{ form.dialysis_date || '请选择日期' }}
</view>
</picker>
</view>
<view class="form-field">
<text class="form-label">透析方式 <text class="required">*</text></text>
<picker :range="dialysisTypes" :range-key="'label'" @change="(e: any) => form.dialysis_type = dialysisTypes[e.detail.value].value">
<view :class="['picker-display', form.dialysis_type ? '' : 'placeholder']">
{{ currentDialysisTypeLabel || '请选择透析方式' }}
</view>
</picker>
</view>
<view class="form-row">
<view class="form-field form-field--half">
<text class="form-label">开始时间</text>
<picker mode="time" :value="form.start_time" @change="(e: any) => form.start_time = e.detail.value">
<view :class="['picker-display', form.start_time ? '' : 'placeholder']">
{{ form.start_time || '选择时间' }}
</view>
</picker>
</view>
<view class="form-field form-field--half">
<text class="form-label">结束时间</text>
<picker mode="time" :value="form.end_time" @change="(e: any) => form.end_time = e.detail.value">
<view :class="['picker-display', form.end_time ? '' : 'placeholder']">
{{ form.end_time || '选择时间' }}
</view>
</picker>
</view>
</view>
</view>
<!-- 体征输入 -->
<view class="section-card">
<text class="section-title">体征数据</text>
<view class="form-field">
<text class="form-label">透前体重 (kg)</text>
<input
type="digit"
class="form-input"
placeholder="请输入"
:value="form.pre_weight ?? ''"
@input="(e: any) => updateNumericField('pre_weight', e.detail.value)"
/>
</view>
<view class="form-field">
<text class="form-label">干体重 (kg)</text>
<input
type="digit"
class="form-input"
placeholder="请输入"
:value="form.dry_weight ?? ''"
@input="(e: any) => updateNumericField('dry_weight', e.detail.value)"
/>
</view>
<view class="form-field">
<text class="form-label">超滤目标 (ml)</text>
<input
type="digit"
class="form-input"
placeholder="请输入"
:value="form.ultrafiltration_volume ?? ''"
@input="(e: any) => updateNumericField('ultrafiltration_volume', e.detail.value)"
/>
</view>
<view class="form-row">
<view class="form-field form-field--half">
<text class="form-label">透前收缩压</text>
<input
type="digit"
class="form-input"
placeholder="mmHg"
:value="form.pre_bp_systolic ?? ''"
@input="(e: any) => updateNumericField('pre_bp_systolic', e.detail.value)"
/>
</view>
<view class="form-field form-field--half">
<text class="form-label">透前舒张压</text>
<input
type="digit"
class="form-input"
placeholder="mmHg"
:value="form.pre_bp_diastolic ?? ''"
@input="(e: any) => updateNumericField('pre_bp_diastolic', e.detail.value)"
/>
</view>
</view>
</view>
<!-- 备注 -->
<view class="section-card">
<text class="section-title">备注</text>
<textarea
class="form-textarea"
placeholder="并发症记录或其他备注（选填）"
:value="form.complication_notes"
@input="(e: any) => form.complication_notes = e.detail.value"
:maxlength="1000"
/>
</view>
<!-- 提交 -->
<view class="submit-wrap">
<view :class="['action-btn', submitting ? 'disabled' : '']" @tap="submitting ? undefined : handleSubmit">
<text class="action-btn-text">{{ submitting ? '提交中...' : '提交记录' }}</text>
</view>
</view>
</view>
</scroll-view>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useElderClass } from '@/composables/useElderClass'
import { createDialysisRecord } from '@/services/doctor/dialysis'
import { listPatients } from '@/services/doctor/patient'
import type { PatientItem } from '@/services/doctor/patient'
const DIALYSIS_TYPES = [
{ label: '血液透析', value: 'hemodialysis' },
{ label: '腹膜透析', value: 'peritoneal' },
] as const
const dialysisTypes = DIALYSIS_TYPES
const { elderClass } = useElderClass()
const form = reactive({
patient_id: '',
dialysis_date: '',
dialysis_type: '',
start_time: '',
end_time: '',
pre_weight: undefined as number | undefined,
dry_weight: undefined as number | undefined,
ultrafiltration_volume: undefined as number | undefined,
pre_bp_systolic: undefined as number | undefined,
pre_bp_diastolic: undefined as number | undefined,
complication_notes: '',
})
const patientSearch = ref('')
const patientResults = ref<PatientItem[]>([])
const searchingPatient = ref(false)
const submitting = ref(false)
const currentDialysisTypeLabel = computed(() => {
const found = DIALYSIS_TYPES.find((t) => t.value === form.dialysis_type)
return found ? found.label : ''
})
let searchTimer: ReturnType<typeof setTimeout> | null = null
function searchPatients() {
if (searchTimer) clearTimeout(searchTimer)
if (!patientSearch.value.trim()) {
patientResults.value = []
return
}
searchTimer = setTimeout(async () => {
searchingPatient.value = true
try {
const res = await listPatients({ search: patientSearch.value.trim(), page_size: 10 })
patientResults.value = res.data || []
} catch {
patientResults.value = []
} finally {
searchingPatient.value = false
}
}, 300)
}
function selectPatient(p: PatientItem) {
form.patient_id = form.patient_id === p.id ? '' : p.id
}
function updateNumericField(field: keyof typeof form, raw: string) {
const val = raw.trim() === '' ? undefined : Number(raw)
;(form as any)[field] = isNaN(val as number) ? undefined : val
}
async function handleSubmit() {
if (!form.patient_id) {
uni.showToast({ title: '请选择患者', icon: 'none' })
return
}
if (!form.dialysis_date) {
uni.showToast({ title: '请选择透析日期', icon: 'none' })
return
}
if (!form.dialysis_type) {
uni.showToast({ title: '请选择透析方式', icon: 'none' })
return
}
submitting.value = true
try {
await createDialysisRecord({
patient_id: form.patient_id,
dialysis_date: form.dialysis_date,
dialysis_type: form.dialysis_type,
start_time: form.start_time || undefined,
end_time: form.end_time || undefined,
pre_weight: form.pre_weight,
dry_weight: form.dry_weight,
ultrafiltration_volume: form.ultrafiltration_volume,
pre_bp_systolic: form.pre_bp_systolic,
pre_bp_diastolic: form.pre_bp_diastolic,
complication_notes: form.complication_notes.trim() || undefined,
})
uni.showToast({ title: '创建成功', icon: 'success' })
setTimeout(() => uni.navigateBack(), 800)
} catch {
uni.showToast({ title: '创建失败', icon: 'none' })
} finally {
submitting.value = false
}
}
</script>
<style lang="scss" scoped>
.page-scroll { min-height: 100vh; background: $bg; }
.page-content { padding: 24px 0 160px; }
.section-card {
@include card;
}
.section-title {
font-size: var(--tk-font-body);
font-weight: 600;
color: $tx;
margin-bottom: 16px;
display: block;
}
// Search
.patient-search { margin-bottom: 12px; }
.search-input {
height: 48px;
border: 1px solid $bd;
border-radius: $r-sm;
padding: 0 16px;
font-size: var(--tk-font-body);
color: $tx;
background: $card;
box-sizing: border-box;
}
.loading-hint, .empty-hint {
@include flex-center;
padding: 24px 0;
}
.loading-hint__text, .empty-hint__text {
font-size: var(--tk-font-body-sm);
color: $tx3;
}
.patient-list {
max-height: 320px;
overflow-y: auto;
}
.patient-item {
display: flex;
align-items: center;
padding: 16px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
border-radius: $r-xs;
&:active { background: $bd-l; }
&--selected {
background: $pri-l;
}
&__name {
flex: 1;
font-size: var(--tk-font-body);
color: $tx;
font-weight: 500;
}
&__info {
font-size: var(--tk-font-body-sm);
color: $tx3;
margin-right: 12px;
}
&__check {
width: 32px;
height: 32px;
@include flex-center;
background: $pri;
border-radius: 50%;
}
}
.check-icon {
color: $card;
font-size: var(--tk-font-body-sm);
}
// Form
.form-field {
margin-bottom: 16px;
}
.form-field--half {
flex: 1;
}
.form-row {
display: flex;
gap: 12px;
}
.form-label {
display: block;
font-size: var(--tk-font-body-sm);
color: $tx2;
margin-bottom: 8px;
}
.required { color: $dan; }
.form-input {
height: 48px;
border: 1px solid $bd;
border-radius: $r-sm;
padding: 0 16px;
font-size: var(--tk-font-body);
color: $tx;
background: $card;
box-sizing: border-box;
}
.picker-display {
height: 48px;
border: 1px solid $bd;
border-radius: $r-sm;
padding: 0 16px;
font-size: var(--tk-font-body);
color: $tx;
background: $card;
display: flex;
align-items: center;
box-sizing: border-box;
}
.picker-display.placeholder {
color: $tx3;
}
.form-textarea {
width: 100%;
min-height: 120px;
border: 1px solid $bd;
border-radius: $r-sm;
padding: 12px;
font-size: var(--tk-font-body);
color: $tx;
box-sizing: border-box;
background: $card;
}
// Submit
.submit-wrap {
margin: 0 24px;
}
.action-btn {
@include btn-primary;
}
.action-btn.disabled { opacity: 0.5; }
.action-btn-text {
color: $card;
font-size: var(--tk-font-body-lg);
font-weight: 600;
}
</style>