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

fix(mp): DevTools 卡死 + 主包 2MB→766KB + 代码质量 4 项全通过

Browse Source 
根因：主包 2MB 全量组件注入导致 DevTools 渲染引擎内存渐增，
叠加离线时固定 3s 抑制期后的请求洪泛。

修复：
- app.config.ts 添加 lazyCodeLoading: requiredComponents
  主包 2.0MB→766KB，taro.js 526→131KB，vendors.js 230→28KB
- request.ts 离线抑制改为指数退避（3s→6s→12s→30s cap）
  后端不可达时自动延长抑制，防止请求风暴
- SegmentTabs Tab 接口改为 readonly，修复 TS 编译错误
- AbortController polyfill 补齐小程序运行时缺失
- 健康首页/设备同步/健康档案/报告/设置页 UI 重构
- 文章页公开端点适配游客访问
- 健康首页 Swiper 间隔优化 4s→5s，动画 500→300ms
This commit is contained in:
iven
2026-05-24 11:32:40 +08:00
parent 675f8a4b10
commit 1e59007bd5
58 changed files with 4950 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
apps/miniprogram/src/pages/health/index.scss
View File

@@ -7,7 +7,10 @@
/* ─── 页头 ─── */
.health-header {
margin-bottom: var(--tk-section-gap);
margin-bottom: var(--tk-gap-sm);
display: flex;
align-items: baseline;
justify-content: space-between;
}
.health-title {
@@ -15,11 +18,50 @@
font-size: var(--tk-font-h1);
font-weight: 700;
color: $tx;
letter-spacing: -0.02em;
}
/* ─── 今日体征摘要 ─── */
.health-date {
font-size: var(--tk-font-cap);
color: $tx3;
}
/* ─── 今日体征 hero 卡片 ─── */
.vitals-grid {
margin-bottom: var(--tk-section-gap);
background: linear-gradient(135deg, $card 60%, $pri-l);
border-radius: var(--tk-card-radius);
box-shadow: $shadow-md;
padding: var(--tk-card-padding);
/* 覆盖 ContentCard 默认 padding/margin */
&.content-card {
padding: var(--tk-card-padding);
margin-bottom: var(--tk-section-gap);
}
}
.vitals-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--tk-gap-md);
}
.vitals-title {
font-size: var(--tk-font-body-sm);
font-weight: 600;
color: $tx2;
letter-spacing: 0.04em;
}
.vitals-badge {
font-size: var(--tk-font-micro);
color: $acc;
background: $acc-l;
padding: 3px 10px;
border-radius: $r-pill;
font-weight: 500;
}
.vitals-row {
@@ -30,9 +72,13 @@
.vital-cell {
text-align: center;
padding: var(--tk-gap-sm);
padding: var(--tk-gap-md) var(--tk-gap-sm);
border-radius: $r-sm;
background: $bg;
&:active {
opacity: var(--tk-touch-feedback-opacity);
}
}
.vital-value {
@@ -40,7 +86,9 @@
font-size: var(--tk-font-num);
font-weight: 700;
color: $tx;
font-variant-numeric: tabular-nums;
display: block;
line-height: 1.1;
}
.vital-unit {
@@ -53,8 +101,9 @@
.vital-label {
font-size: var(--tk-font-cap);
color: $tx2;
font-weight: 500;
display: block;
margin-top: 4px;
margin-top: 6px;
}
.vital-cell.vital-warn {
@@ -71,11 +120,11 @@
}
}
/* ─── 快捷入口 ─── */
/* ─── 快捷入口 — 横排 4 格图标 ─── */
.quick-entries {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--tk-gap-sm);
gap: var(--tk-gap-xs);
margin-bottom: var(--tk-section-gap);
}
@@ -86,6 +135,7 @@
gap: var(--tk-gap-xs);
min-height: var(--tk-touch-min);
justify-content: center;
padding: var(--tk-gap-sm) 0;
&:active {
opacity: var(--tk-touch-feedback-opacity);
@@ -93,17 +143,47 @@
}
.quick-icon {
width: 48px;
height: 48px;
border-radius: $r;
background: var(--tk-pri-l);
width: 44px;
height: 44px;
border-radius: $r-sm;
@include flex-center;
}
.quick-icon-text {
font-size: var(--tk-font-body);
font-size: 18px;
font-weight: 600;
color: var(--tk-pri);
}
.quick-icon--input {
background: $pri-l;
.quick-icon-text {
color: $pri;
}
}
.quick-icon--trend {
background: $doc-pri-l;
.quick-icon-text {
color: $doc-pri;
}
}
.quick-icon--report {
background: $acc-l;
.quick-icon-text {
color: $acc;
}
}
.quick-icon--med {
background: $wrn-l;
.quick-icon-text {
color: $wrn;
}
}
.quick-label {
@@ -112,12 +192,21 @@
font-weight: 500;
}
/* ─── 告警提示 ─── */
/* ─── 告警横幅 ─── */
.alert-hint {
display: flex;
align-items: center;
gap: var(--tk-gap-sm);
margin-bottom: var(--tk-section-gap);
background: $dan-l;
border-radius: $r-sm;
/* 覆盖 ContentCard 默认样式 */
&.content-card {
background: $dan-l;
box-shadow: none;
border: none;
}
&:active {
opacity: var(--tk-touch-feedback-opacity);
@@ -125,8 +214,8 @@
}
.alert-dot {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
border-radius: 50%;
background: $dan;
flex-shrink: 0;
@@ -141,8 +230,9 @@
.alert-arrow {
font-size: var(--tk-font-body);
color: $tx3;
color: $dan;
flex-shrink: 0;
opacity: 0.6;
}
/* ─── 趋势图 ─── */
@@ -183,7 +273,7 @@
left: 8px;
right: 8px;
border-top: 1.5px dashed $wrn;
opacity: 0.6;
opacity: 0.5;
pointer-events: none;
}
@@ -193,7 +283,7 @@
top: -16px;
font-size: var(--tk-font-micro);
color: $wrn;
opacity: 0.8;
opacity: 0.7;
}
.trend-bar-col {
@@ -206,17 +296,18 @@
}
.trend-bar {
width: 28px;
width: 24px;
border-radius: $r-xs $r-xs 0 0;
min-height: 8px;
opacity: 0.8;
min-height: 6px;
&.trend-bar-normal {
background: var(--tk-pri);
opacity: 0.75;
}
&.trend-bar-warn {
background: $wrn;
opacity: 0.85;
}
}
@@ -286,30 +377,42 @@
}
.article-entry-text {
font-size: var(--tk-font-cap);
font-size: var(--tk-font-body-sm);
color: $tx;
font-weight: 500;
}
/* ─── AI 建议卡片 ─── */
.ai-suggestion-card {
background: $acc-l;
background: linear-gradient(135deg, #F0F7F0 0%, $acc-l 100%);
border-radius: $r;
padding: var(--tk-gap-md);
padding: var(--tk-card-padding);
margin-bottom: var(--tk-section-gap);
box-shadow: none;
border-left: 4px solid $acc;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, $acc, $acc 60%, transparent);
border-radius: 3px 3px 0 0;
}
}
.ai-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--tk-gap-xs);
margin-bottom: var(--tk-gap-md);
}
.ai-card-title {
font-size: var(--tk-font-cap);
font-size: var(--tk-font-body-sm);
font-weight: 600;
color: $acc;
}
@@ -321,8 +424,8 @@
}
.ai-suggestion-item {
padding: var(--tk-gap-xs) 0;
border-bottom: 1px solid rgba($acc, 0.15);
padding: var(--tk-gap-sm) 0;
border-bottom: 1px solid rgba($acc, 0.12);
&:last-child {
border-bottom: none;
@@ -331,7 +434,7 @@
.ai-suggestion-main {
display: flex;
align-items: center;
align-items: flex-start;
gap: var(--tk-gap-xs);
&:active {
@@ -344,6 +447,7 @@
height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 5px;
&.ai-risk-high {
background: $dan;
@@ -362,19 +466,20 @@
font-size: var(--tk-font-cap);
color: $tx2;
line-height: 1.6;
flex: 1;
}
/* ─── AI 建议反馈按钮 ─── */
.ai-feedback-row {
display: flex;
gap: var(--tk-gap-xs);
margin-top: var(--tk-gap-2xs);
margin-top: var(--tk-gap-xs);
padding-left: 20px;
}
.ai-feedback-btn {
height: 44px;
min-height: 44px;
height: 36px;
min-height: 36px;
border-radius: $r-xs;
@include flex-center;
padding: 0 var(--tk-gap-sm);

40
apps/miniprogram/src/pages/health/index.tsx
View File

@@ -13,10 +13,10 @@ import { submitSuggestionFeedback } from '../../services/ai-analysis';
import './index.scss';
const QUICK_ENTRIES = [
{ label: '录入体征', icon: '笔', path: '/pages/pkg-health/input/index' },
{ label: '健康趋势', icon: '线', path: '/pages/pkg-health/trend/index' },
{ label: '我的报告', icon: '报', path: '/pages/pkg-profile/reports/index' },
{ label: '用药记录', icon: '药', path: '/pages/pkg-profile/medication/index' },
{ label: '录入体征', icon: '✏', color: 'input', path: '/pages/pkg-health/input/index' },
{ label: '健康趋势', icon: '📈', color: 'trend', path: '/pages/pkg-health/trend/index' },
{ label: '我的报告', icon: '📋', color: 'report', path: '/pages/pkg-profile/reports/index' },
{ label: '健康档案', icon: '健', color: 'med', path: '/pages/pkg-profile/health-records/index' },
] as const;
function statusClass(status?: string): string {
@@ -26,6 +26,14 @@ function statusClass(status?: string): string {
return 'vital-ok';
}
function formatDate(): string {
const d = new Date();
const month = d.getMonth() + 1;
const day = d.getDate();
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
return `${month}月${day}日 周${weekDays[d.getDay()]}`;
}
export default function Health() {
const user = useAuthStore((s) => s.user);
const modeClass = useElderClass();
@@ -59,6 +67,7 @@ export default function Health() {
{ label: '血糖', value: summary.blood_sugar ? `${summary.blood_sugar.value}` : '—', unit: 'mmol/L', status: summary.blood_sugar?.status },
{ label: '体重', value: summary.weight ? `${summary.weight.value}` : '—', unit: 'kg', status: summary.weight?.status },
];
const recordedCount = vitals.filter((v) => v.value !== '—').length;
const getThresholdValue = (type: VitalType): number | null => {
if (!thresholds.length) return null;
@@ -82,10 +91,17 @@ export default function Health() {
<PageShell padding="md" safeBottom={false} scroll className={`health-page ${modeClass}`}>
<View className='health-header'>
<Text className='health-title'>健康总览</Text>
<Text className='health-date'>{formatDate()}</Text>
</View>
{/* 今日体征摘要 */}
<ContentCard variant="elevated" className='vitals-grid'>
{/* 今日体征 hero 卡片 */}
<View className='vitals-grid'>
<View className='vitals-header'>
<Text className='vitals-title'>今日体征</Text>
{recordedCount > 0 && (
<Text className='vitals-badge'>已记录 {recordedCount} 项</Text>
)}
</View>
{loading ? <Loading /> : (
<View className='vitals-row'>
{vitals.map((v) => (
@@ -97,9 +113,9 @@ export default function Health() {
))}
</View>
)}
</ContentCard>
</View>
{/* 快捷入口 */}
{/* 快捷入口 — 横排 4 格图标 */}
<View className='quick-entries'>
{QUICK_ENTRIES.map((e) => (
<View
@@ -107,7 +123,7 @@ export default function Health() {
className='quick-entry'
onClick={() => safeNavigateTo(e.path)}
>
<View className='quick-icon'>
<View className={`quick-icon quick-icon--${e.color}`}>
<Text className='quick-icon-text'>{e.icon}</Text>
</View>
<Text className='quick-label'>{e.label}</Text>
@@ -115,10 +131,12 @@ export default function Health() {
))}
</View>
{/* 告警提示 */}
{/* 告警横幅 */}
{alertCount > 0 && (
<ContentCard
variant="elevated"
variant="default"
padding="sm"
margin="none"
className='alert-hint'
onPress={() => safeNavigateTo('/pages/pkg-health/alerts/index')}
>