From 37327a4da462bae0623f80e8c67893577b718489 Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Sat, 16 May 2026 01:33:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(mp):=20=E8=BF=81=E7=A7=BB=E5=8C=BB?=
 =?UTF-8?q?=E6=8A=A4+=E5=81=A5=E5=BA=B7=E9=A1=B5=E9=9D=A2=20=E2=80=94=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20PageShell=20+=20ContentCard=20=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E7=BB=84=E4=BB=B6=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

行动收件箱、医护工作台、健康趋势、患者告警、体征录入、
日常监测、设备同步共 7 个页面迁移：
- 最外层容器 → PageShell
- 卡片元素 → ContentCard
- SCSS 删除 min-height/background/box-shadow 通用样式
---
 .../pkg-doctor-core/action-inbox/index.scss   | 14 +++-------
 .../pkg-doctor-core/action-inbox/index.tsx    | 13 ++++++----
 .../src/pages/pkg-doctor-core/index.scss      |  6 ++---
 .../src/pages/pkg-doctor-core/index.tsx       |  7 ++---
 .../src/pages/pkg-health/alerts/index.scss    | 11 ++------
 .../src/pages/pkg-health/alerts/index.tsx     | 18 +++++++------
 .../pkg-health/daily-monitoring/index.scss    | 14 ++--------
 .../pkg-health/daily-monitoring/index.tsx     | 22 +++++++++-------
 .../pages/pkg-health/device-sync/index.scss   | 14 ++--------
 .../pages/pkg-health/device-sync/index.tsx    | 14 +++++-----
 .../src/pages/pkg-health/input/index.scss     | 15 ++---------
 .../src/pages/pkg-health/input/index.tsx      | 22 +++++++++-------
 .../src/pages/pkg-health/trend/index.scss     | 14 +++-------
 .../src/pages/pkg-health/trend/index.tsx      | 26 ++++++++++---------
 14 files changed, 86 insertions(+), 124 deletions(-)

diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss
index bd82bbd..04abf4e 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss
@@ -1,10 +1,8 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
 
-.action-inbox-page {
-  min-height: 100vh;
-  background: $bg;
-}
+// PageShell 已接管：min-height, background
+// ContentCard 已接管：inbox-card 背景/圆角/阴影/触摸反馈
 
 .inbox-list {
   height: calc(100vh - 50px);
@@ -12,11 +10,7 @@
 }
 
 .inbox-card {
-  background: $card;
-  border-radius: $r-sm;
-  padding: 14px 16px;
   margin-bottom: 10px;
-  box-shadow: $shadow-sm;
 
   .inbox-card-header {
     display: flex;
diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx
index d52927b..049f165 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx
@@ -13,6 +13,8 @@ import Loading from '@/components/Loading';
 import ErrorState from '@/components/ErrorState';
 import EmptyState from '@/components/EmptyState';
 import SegmentTabs from '@/components/SegmentTabs';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
@@ -119,7 +121,7 @@ export default function ActionInboxPage() {
   };
 
   return (
-    <View className={`action-inbox-page ${modeClass}`}>
+    <PageShell padding="none" className={modeClass}>
       <SegmentTabs tabs={STATUS_TABS} activeKey={activeTab} onChange={handleTabChange} variant="underline" />
 
       {error ? (
@@ -129,10 +131,11 @@ export default function ActionInboxPage() {
       ) : (
         <ScrollView scrollY className="inbox-list">
           {items.map((item) => (
-            <View
+            <ContentCard
               key={item.id}
               className="inbox-card"
-              onClick={() => handleItemClick(item)}
+              activeFeedback="opacity"
+              onPress={() => handleItemClick(item)}
             >
               <View className="inbox-card-header">
                 <Text
@@ -146,7 +149,7 @@ export default function ActionInboxPage() {
                 {item.patient_name} ·{' '}
                 {new Date(item.created_at).toLocaleDateString('zh-CN')}
               </Text>
-            </View>
+            </ContentCard>
           ))}
           {loading && <Loading />}
           {!loading && items.length >= total && total > 0 && (
@@ -208,6 +211,6 @@ export default function ActionInboxPage() {
           )}
         </View>
       )}
-    </View>
+    </PageShell>
   );
 }
diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/index.scss b/apps/miniprogram/src/pages/pkg-doctor-core/index.scss
index de5ace2..3a15391 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/index.scss
@@ -1,11 +1,9 @@
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
+// PageShell 已接管：min-height, background, padding
+
 .doctor-home {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px;
-  padding-bottom: calc(160px + env(safe-area-inset-bottom));
 
   &__header {
     margin-bottom: 40px;
diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/index.tsx b/apps/miniprogram/src/pages/pkg-doctor-core/index.tsx
index d20d6ff..0ace41b 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/index.tsx
@@ -1,11 +1,12 @@
 import { useState, useMemo, useCallback } from 'react';
-import { View, Text, Input, ScrollView } from '@tarojs/components';
+import { View, Text, Input } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { useAuthStore } from '@/stores/auth';
 import { useElderClass } from '../../hooks/useElderClass';
 import { usePageData } from '@/hooks/usePageData';
 import { getDashboard, type DoctorDashboard } from '@/services/doctor/dashboard';
 import Loading from '@/components/Loading';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';
 
 interface CardConfig {
@@ -107,7 +108,7 @@ export default function DoctorHome() {
   if (loading) return <Loading />;
 
   return (
-    <ScrollView scrollY className={`doctor-home ${modeClass}`}>
+    <PageShell safeBottom={false} className={`doctor-home ${modeClass}`}>
       <View className='doctor-home__header'>
         <Text className='doctor-home__title'>医护工作台</Text>
         <Text className='doctor-home__greeting'>
@@ -192,6 +193,6 @@ export default function DoctorHome() {
       <View className='doctor-home__footer'>
         <Text className='doctor-home__logout' onClick={handleLogout}>退出登录</Text>
       </View>
-    </ScrollView>
+    </PageShell>
   );
 }
diff --git a/apps/miniprogram/src/pages/pkg-health/alerts/index.scss b/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
index 2c25cbe..0945578 100644
--- a/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
@@ -1,11 +1,8 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.alerts-page {
-  min-height: 100vh;
-  background: $bg;
-  padding-bottom: env(safe-area-inset-bottom);
-}
+// PageShell 已接管：min-height, background, safe-bottom
+// ContentCard 已接管：alert-card 背景/圆角/阴影
 
 .alerts-tabs {
   display: flex;
@@ -39,11 +36,7 @@
 }
 
 .alert-card {
-  background: $card;
-  border-radius: $r;
-  padding: 24px;
   margin-bottom: 16px;
-  box-shadow: $shadow-sm;
 }
 
 .alert-header {
diff --git a/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx b/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx
index fc91648..5a06dcd 100644
--- a/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx
@@ -8,6 +8,8 @@ import Loading from '@/components/Loading';
 import ErrorState from '@/components/ErrorState';
 import EmptyState from '@/components/EmptyState';
 import SegmentTabs from '@/components/SegmentTabs';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
@@ -79,23 +81,23 @@ export default function PatientAlerts() {
 
   if (!currentPatient) {
     return (
-      <View className={`alerts-page ${modeClass}`}>
+      <PageShell padding="none" className={modeClass}>
         <ErrorState text='请先完善个人档案' onRetry={() => Taro.navigateTo({ url: '/pages/pkg-profile/family-add/index' })} />
-      </View>
+      </PageShell>
     );
   }
 
   if (error) {
     return (
-      <View className={`alerts-page ${modeClass}`}>
+      <PageShell padding="none" className={modeClass}>
         <SegmentTabs tabs={STATUS_TABS} activeKey={status} onChange={handleTabChange} variant="pill" />
         <ErrorState onRetry={() => fetchAlerts(1, status, true)} />
-      </View>
+      </PageShell>
     );
   }
 
   return (
-    <View className={`alerts-page ${modeClass}`}>
+    <PageShell padding="none" className={modeClass}>
       <SegmentTabs tabs={STATUS_TABS} activeKey={status} onChange={handleTabChange} variant="pill" />
 
       {alerts.length === 0 && !loading ? (
@@ -105,7 +107,7 @@ export default function PatientAlerts() {
           {alerts.map((item) => {
             const sev = SEVERITY_MAP[item.severity] || SEVERITY_MAP.warning;
             return (
-              <View className='alert-card' key={item.id}>
+              <ContentCard className='alert-card' key={item.id}>
                 <View className='alert-header'>
                   <View className={`alert-badge ${sev.className}`}>
                     <Text className='alert-badge-text'>{sev.label}</Text>
@@ -115,7 +117,7 @@ export default function PatientAlerts() {
                   </Text>
                 </View>
                 <Text className='alert-title'>{item.title}</Text>
-              </View>
+              </ContentCard>
             );
           })}
           {loading && <Loading />}
@@ -124,6 +126,6 @@ export default function PatientAlerts() {
           )}
         </View>
       )}
-    </View>
+    </PageShell>
   );
 }
diff --git a/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss b/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss
index e982f54..4f2a458 100644
--- a/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss
@@ -1,11 +1,8 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.dm-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 0 0 60px;
-}
+// PageShell 已接管：min-height, background
+// ContentCard 已接管：dm-card/dm-group 背景/圆角/阴影
 
 /* ── hero ── */
 .dm-hero {
@@ -44,10 +41,6 @@
 
 /* ── card (standalone, used for date picker) ── */
 .dm-card {
-  background: $card;
-  border-radius: $r;
-  box-shadow: $shadow-md;
-  padding: 28px;
   margin: 0 24px 20px;
 }
 
@@ -98,9 +91,6 @@
 
 /* ── collapsible group ── */
 .dm-group {
-  background: $card;
-  border-radius: $r;
-  box-shadow: $shadow-md;
   margin: 0 24px 20px;
   overflow: hidden;
 }
diff --git a/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.tsx b/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.tsx
index 869716a..17c74de 100644
--- a/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.tsx
@@ -10,6 +10,8 @@ import { clearRequestCache } from '@/services/request';
 import { trackEvent } from '@/services/analytics';
 import { useSafeTimeout } from '@/hooks/useSafeTimeout';
 import { useElderClass } from '@/hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import {
   BP_RANGE, WEIGHT_RANGE, SUGAR_RANGE, VOLUME_RANGE,
   checkAbnormal, formatDate, FIELD_LABELS,
@@ -218,7 +220,7 @@ export default function DailyMonitoring() {
   const bloodSugarAbnormal = checkAbnormal(bloodSugar, 'bloodSugar');
 
   return (
-    <View className={`dm-page ${modeClass}`}>
+    <PageShell padding="none" safeBottom className={modeClass}>
       {/* 页面标题 */}
       <View className='dm-hero'>
         <View className='dm-hero-icon'>
@@ -229,7 +231,7 @@ export default function DailyMonitoring() {
       </View>
 
       {/* 日期选择 (standalone card) */}
-      <View className='dm-card'>
+      <ContentCard className='dm-card'>
         <View className='dm-card-header'>
           <Text className='dm-card-title'>记录日期</Text>
           {isToday && (
@@ -247,10 +249,10 @@ export default function DailyMonitoring() {
             <Text className='dm-date-arrow'>V</Text>
           </View>
         </Picker>
-      </View>
+      </ContentCard>
 
       {/* ── Group 1: 晨间体征 (default open) ── */}
-      <View className={`dm-group${collapsed.morning ? ' dm-group-collapsed' : ''}`}>
+      <ContentCard className={`dm-group${collapsed.morning ? ' dm-group-collapsed' : ''}`}>
         <View className='dm-group-header' onClick={() => toggleSection('morning')}>
           <Text className='dm-group-title'>晨间体征</Text>
           <Text className={`dm-group-arrow${collapsed.morning ? '' : ' dm-group-arrow-open'}`}>&#9656;</Text>
@@ -295,10 +297,10 @@ export default function DailyMonitoring() {
           </View>
           <Text className='dm-field-unit'>mmHg</Text>
         </View>
-      </View>
+      </ContentCard>
 
       {/* ── Group 2: 晚间体征 (default open) ── */}
-      <View className={`dm-group${collapsed.evening ? ' dm-group-collapsed' : ''}`}>
+      <ContentCard className={`dm-group${collapsed.evening ? ' dm-group-collapsed' : ''}`}>
         <View className='dm-group-header' onClick={() => toggleSection('evening')}>
           <Text className='dm-group-title'>晚间体征</Text>
           <Text className={`dm-group-arrow${collapsed.evening ? '' : ' dm-group-arrow-open'}`}>&#9656;</Text>
@@ -343,10 +345,10 @@ export default function DailyMonitoring() {
           </View>
           <Text className='dm-field-unit'>mmHg</Text>
         </View>
-      </View>
+      </ContentCard>
 
       {/* ── Group 3: 其他指标 (default collapsed) ── */}
-      <View className={`dm-group${collapsed.other ? ' dm-group-collapsed' : ''}`}>
+      <ContentCard className={`dm-group${collapsed.other ? ' dm-group-collapsed' : ''}`}>
         <View className='dm-group-header' onClick={() => toggleSection('other')}>
           <Text className='dm-group-title'>其他指标</Text>
           <Text className={`dm-group-arrow${collapsed.other ? '' : ' dm-group-arrow-open'}`}>&#9656;</Text>
@@ -428,7 +430,7 @@ export default function DailyMonitoring() {
             />
           </View>
         </View>
-      </View>
+      </ContentCard>
 
       {/* 提交 */}
       <View
@@ -442,6 +444,6 @@ export default function DailyMonitoring() {
       <View className='dm-reset' onClick={resetForm}>
         <Text className='dm-reset-text'>清空表单</Text>
       </View>
-    </View>
+    </PageShell>
   );
 }
diff --git a/apps/miniprogram/src/pages/pkg-health/device-sync/index.scss b/apps/miniprogram/src/pages/pkg-health/device-sync/index.scss
index 35f8251..db05bda 100644
--- a/apps/miniprogram/src/pages/pkg-health/device-sync/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/device-sync/index.scss
@@ -1,11 +1,8 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.device-sync-page {
-  min-height: 100vh;
-  background: $bg;
-  padding-bottom: env(safe-area-inset-bottom);
-}
+// PageShell 已接管：min-height, background, safe-bottom
+// ContentCard 已接管：sync-status-card/sync-result-card 背景/圆角/阴影
 
 .sync-header {
   background: $pri;
@@ -130,11 +127,7 @@
 .sync-status-card {
   display: flex;
   align-items: center;
-  background: $card;
-  border-radius: $r-sm;
-  padding: 24px;
   margin-bottom: 16px;
-  box-shadow: $shadow-sm;
 }
 
 .sync-status-dot {
@@ -225,9 +218,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: $card;
-  border-radius: $r;
-  padding: 48px 24px;
   margin-bottom: 24px;
   box-shadow: $shadow-sm;
 }
diff --git a/apps/miniprogram/src/pages/pkg-health/device-sync/index.tsx b/apps/miniprogram/src/pages/pkg-health/device-sync/index.tsx
index 9f72bae..e5664ce 100644
--- a/apps/miniprogram/src/pages/pkg-health/device-sync/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-health/device-sync/index.tsx
@@ -12,6 +12,8 @@ import { uploadReadings } from '@/services/device-sync';
 import { useAuthStore } from '@/stores/auth';
 import type { BLEDevice, NormalizedReading } from '@/services/ble/types';
 import { useElderClass } from '@/hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import './index.scss';
 
 /** liveReadings 最大保留条数，防止内存无限增长 */
@@ -232,10 +234,10 @@ export default function DeviceSync() {
 
   const renderConnected = () => (
     <View className="sync-section">
-      <View className="sync-status-card">
+      <ContentCard className="sync-status-card">
         <Text className="sync-status-dot sync-status-dot--connected" />
         <Text className="sync-status-text">已连接: {selectedDevice?.name}</Text>
-      </View>
+      </ContentCard>
 
       {liveReadings.length > 0 && (
         <View className="sync-readings-panel">
@@ -276,11 +278,11 @@ export default function DeviceSync() {
 
   const renderDone = () => (
     <View className="sync-section">
-      <View className="sync-result-card">
+      <ContentCard className="sync-result-card">
         <Text className="sync-result-icon">V</Text>
         <Text className="sync-result-title">同步完成</Text>
         <Text className="sync-result-count">成功上传 {syncCount} 条数据</Text>
-      </View>
+      </ContentCard>
       <View className="sync-action" onClick={() => {
         handleDisconnect();
         if (returnTo === 'input') {
@@ -293,7 +295,7 @@ export default function DeviceSync() {
   );
 
   return (
-    <View className={`device-sync-page ${modeClass}`}>
+    <PageShell padding="none" className={modeClass}>
       <View className="sync-header">
         <Text className="sync-header-title">设备同步</Text>
       </View>
@@ -317,6 +319,6 @@ export default function DeviceSync() {
       {(pageState === 'idle' || pageState === 'error') && renderIdle()}
       {pageState === 'connected' && renderConnected()}
       {pageState === 'done' && renderDone()}
-    </View>
+    </PageShell>
   );
 }
diff --git a/apps/miniprogram/src/pages/pkg-health/input/index.scss b/apps/miniprogram/src/pages/pkg-health/input/index.scss
index 90869b2..a83cfef 100644
--- a/apps/miniprogram/src/pages/pkg-health/input/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/input/index.scss
@@ -1,11 +1,8 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.input-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 0 0 60px;
-}
+// PageShell 已接管：min-height, background
+// ContentCard 已接管：input-card 背景/圆角/阴影
 
 /* ── hero ── */
 .input-hero {
@@ -47,10 +44,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: $card;
-  border-radius: $r;
-  box-shadow: $shadow-sm;
-  padding: 24px 28px;
   margin: 0 24px 20px;
   border: 1px dashed $pri;
 
@@ -72,10 +65,6 @@
 
 /* ── card ── */
 .input-card {
-  background: $card;
-  border-radius: $r;
-  box-shadow: $shadow-md;
-  padding: 28px;
   margin: 0 24px 20px;
 }
 
diff --git a/apps/miniprogram/src/pages/pkg-health/input/index.tsx b/apps/miniprogram/src/pages/pkg-health/input/index.tsx
index 57121c7..8345783 100644
--- a/apps/miniprogram/src/pages/pkg-health/input/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-health/input/index.tsx
@@ -12,6 +12,8 @@ import { useSafeTimeout } from '@/hooks/useSafeTimeout';
 import { trackEvent } from '@/services/analytics';
 import { useElderClass } from '../../../hooks/useElderClass';
 import Loading from '../../../components/Loading';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import './index.scss';
 
 const INDICATORS = [
@@ -176,7 +178,7 @@ export default function HealthInput() {
   const indicatorInitial = INDICATORS[indicatorIdx].label.charAt(0);
 
   return (
-    <View className={`input-page ${modeClass}`}>
+    <PageShell padding="none" safeBottom className={modeClass}>
       {loadingThresholds && <Loading />}
 
       {!loadingThresholds && (
@@ -197,7 +199,7 @@ export default function HealthInput() {
       </View>
 
       {/* 指标类型选择 */}
-      <View className='input-card'>
+      <ContentCard className='input-card'>
         <View className='input-card-header'>
           <View className='input-card-indicator'>
             <Text className='input-card-indicator-char'>{indicatorInitial}</Text>
@@ -215,11 +217,11 @@ export default function HealthInput() {
             <Text className='input-picker-arrow'>V</Text>
           </View>
         </Picker>
-      </View>
+      </ContentCard>
 
       {/* 数值输入 */}
       {BP_INDICATORS.includes(INDICATORS[indicatorIdx].value) ? (
-        <View className='input-card'>
+        <ContentCard className='input-card'>
           <Text className='input-section-title'>血压数值</Text>
           <View className='input-bp-group'>
             <View className='input-bp-field'>
@@ -249,9 +251,9 @@ export default function HealthInput() {
             </View>
           </View>
           <Text className='input-field-unit'>mmHg</Text>
-        </View>
+        </ContentCard>
       ) : (
-        <View className='input-card'>
+        <ContentCard className='input-card'>
           <Text className='input-section-title'>检测数值</Text>
           <Input
             type='digit'
@@ -263,11 +265,11 @@ export default function HealthInput() {
           <Text className='input-field-unit'>
             {INDICATORS[indicatorIdx].label.match(/\((.+)\)/)?.[1] || ''}
           </Text>
-        </View>
+        </ContentCard>
       )}
 
       {/* 备注 */}
-      <View className='input-card'>
+      <ContentCard className='input-card'>
         <Text className='input-section-title'>备注</Text>
         <Input
           className='input-field-box input-field-full'
@@ -275,7 +277,7 @@ export default function HealthInput() {
           value={note}
           onInput={(e) => setNote(e.detail.value)}
         />
-      </View>
+      </ContentCard>
 
       {/* 提交 */}
       <View
@@ -286,6 +288,6 @@ export default function HealthInput() {
       </View>
       </>
       )}
-    </View>
+    </PageShell>
   );
 }
diff --git a/apps/miniprogram/src/pages/pkg-health/trend/index.scss b/apps/miniprogram/src/pages/pkg-health/trend/index.scss
index 7a06a18..036f33a 100644
--- a/apps/miniprogram/src/pages/pkg-health/trend/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/trend/index.scss
@@ -1,9 +1,10 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.trend-page {
-  min-height: 100vh;
-  background: $bg;
+// PageShell 已接管：min-height, background
+// ContentCard 已接管：trend-chart-card 背景/圆角/阴影
+
+.trend-page-shell {
   padding-bottom: 60px;
 }
 
@@ -48,10 +49,6 @@
 /* ── chart card ── */
 .trend-chart-card {
   margin: 0 24px 20px;
-  background: $card;
-  border-radius: $r;
-  box-shadow: $shadow-md;
-  padding: 24px;
   min-height: 300px;
   overflow: hidden;
 }
@@ -59,9 +56,6 @@
 /* ── reference card ── */
 .trend-ref-card {
   margin: 0 24px 20px;
-  background: $acc-l;
-  border-radius: $r;
-  padding: 20px 24px;
   display: flex;
   align-items: center;
   gap: 16px;
diff --git a/apps/miniprogram/src/pages/pkg-health/trend/index.tsx b/apps/miniprogram/src/pages/pkg-health/trend/index.tsx
index dca1ef6..116f35b 100644
--- a/apps/miniprogram/src/pages/pkg-health/trend/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-health/trend/index.tsx
@@ -8,6 +8,8 @@ import Loading from '@/components/Loading';
 import ErrorState from '@/components/ErrorState';
 import EmptyState from '@/components/EmptyState';
 import SegmentTabs from '@/components/SegmentTabs';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
 
@@ -67,7 +69,7 @@ export default function Trend() {
   };
 
   return (
-    <View className={`trend-page ${modeClass}`}>
+    <PageShell padding="none" className={modeClass}>
       {/* 页面标题 */}
       <View className='trend-hero'>
         <View className='trend-hero-icon'>
@@ -81,36 +83,36 @@ export default function Trend() {
 
       {/* ECharts 折线图 */}
       {loading ? (
-        <View className='trend-chart-card'>
+        <ContentCard className='trend-chart-card'>
           <Loading />
-        </View>
+        </ContentCard>
       ) : error ? (
-        <View className='trend-chart-card'>
+        <ContentCard className='trend-chart-card'>
           <ErrorState onRetry={fetchTrend} />
-        </View>
+        </ContentCard>
       ) : points.length === 0 ? (
-        <View className='trend-chart-card'>
+        <ContentCard className='trend-chart-card'>
           <EmptyState text='暂无趋势数据' />
-        </View>
+        </ContentCard>
       ) : (
-        <View className='trend-chart-card'>
+        <ContentCard className='trend-chart-card'>
           <TrendChart
             data={points}
             referenceMin={meta.refMin}
             referenceMax={meta.refMax}
             unit={meta.unit}
           />
-        </View>
+        </ContentCard>
       )}
 
       {/* 参考区间 */}
       {!loading && points.length > 0 && meta.refMin !== undefined && meta.refMax !== undefined && (
-        <View className='trend-ref-card'>
+        <ContentCard variant="outlined" className='trend-ref-card'>
           <Text className='trend-ref-label'>参考区间</Text>
           <Text className='trend-ref-value'>
             {meta.refMin} ~ {meta.refMax} {meta.unit}
           </Text>
-        </View>
+        </ContentCard>
       )}
 
       {/* 数据列表 */}
@@ -135,6 +137,6 @@ export default function Trend() {
           })}
         </View>
       )}
-    </View>
+    </PageShell>
   );
 }