refactor(mp): 迁移患者端详情页 — 使用统一组件库 (10/12)

报告详情、随访详情、透析记录详情、透析处方详情页:
- View.detail-page → PageShell 替代手写 page 容器
- .detail-card → ContentCard 替代手写卡片样式
- 删除通用 page 容器和 card 样式，保留业务布局样式

apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss

@@ -1,28 +1,11 @@
 @import '../../../../styles/variables.scss';
 @import '../../../../styles/mixins.scss';
 
-.detail-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 40px;
-}
-
-.detail-card {
-  background: $card;
-  border-radius: $r;
-  padding: 28px;
-  margin-bottom: 20px;
-  box-shadow: $shadow-sm;
-}
-
-.header-card {
-  .header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-  }
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
 }
 
 .detail-title {

apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.tsx

@@ -5,6 +5,8 @@ import { usePageData } from '@/hooks/usePageData';
 import { getDialysisPrescription } from '@/services/dialysis';
 import type { DialysisPrescription } from '@/services/dialysis';
 import Loading from '@/components/Loading';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../../hooks/useElderClass';
 import './index.scss';
 
@@ -36,8 +38,8 @@ export default function DialysisPrescriptionDetail() {
 
   usePageData(fetchDetail, { throttleMs: 60000 });
 
-  if (loading) return <View className={`detail-page ${modeClass}`}><Loading /></View>;
-  if (!rx) return <View className={`detail-page ${modeClass}`}><View className='empty-state'><Text className='empty-text'>处方不存在</Text></View></View>;
+  if (loading) return <PageShell className={modeClass}><Loading /></PageShell>;
+  if (!rx) return <PageShell className={modeClass}><View className='empty-state'><Text className='empty-text'>处方不存在</Text></View></PageShell>;
 
   const si = STATUS_MAP[rx.status] || { label: rx.status, cls: '' };
 
@@ -52,9 +54,9 @@ export default function DialysisPrescriptionDetail() {
   };
 
   return (
-    <View className={`detail-page ${modeClass}`}>
+    <PageShell className={modeClass}>
       {/* 状态头部 */}
-      <View className='detail-card header-card'>
+      <ContentCard>
         <View className='header-row'>
           <Text className='detail-title'>{rx.dialyzer_model || '透析处方'}</Text>
           <Text className={`status-tag ${si.cls}`}>{si.label}</Text>
@@ -62,10 +64,10 @@ export default function DialysisPrescriptionDetail() {
         {(rx.effective_from || rx.effective_to) && (
           <Text className='header-sub'>{rx.effective_from || '...'} ~ {rx.effective_to || '...'}</Text>
         )}
-      </View>
+      </ContentCard>
 
       {/* 基本参数 */}
-      <View className='detail-card'>
+      <ContentCard>
         <Text className='section-title'>基本参数</Text>
         <Row label='透析器型号' value={rx.dialyzer_model} />
         <Row label='膜面积' value={rx.membrane_area != null ? `${rx.membrane_area} m²` : null} />
@@ -73,48 +75,48 @@ export default function DialysisPrescriptionDetail() {
         <Row label='透析液流量' value={rx.dialysate_flow_rate != null ? `${rx.dialysate_flow_rate} ml/min` : null} />
         <Row label='频率' value={rx.frequency_per_week != null ? `${rx.frequency_per_week} 次/周` : null} />
         <Row label='每次时长' value={rx.duration_minutes != null ? `${rx.duration_minutes} 分钟` : null} />
-      </View>
+      </ContentCard>
 
       {/* 透析液配比 */}
-      <View className='detail-card'>
+      <ContentCard>
         <Text className='section-title'>透析液配比</Text>
         <Row label='钾浓度' value={rx.dialysate_potassium != null ? `${rx.dialysate_potassium} mmol/L` : null} />
         <Row label='钙浓度' value={rx.dialysate_calcium != null ? `${rx.dialysate_calcium} mmol/L` : null} />
         <Row label='碳酸氢盐浓度' value={rx.dialysate_bicarbonate != null ? `${rx.dialysate_bicarbonate} mmol/L` : null} />
-      </View>
+      </ContentCard>
 
       {/* 抗凝方案 */}
-      <View className='detail-card'>
+      <ContentCard>
         <Text className='section-title'>抗凝方案</Text>
         <Row label='抗凝类型' value={rx.anticoagulation_type} />
         <Row label='抗凝剂量' value={rx.anticoagulation_dose} />
-      </View>
+      </ContentCard>
 
       {/* 血管通路 */}
       {(rx.vascular_access_type || rx.vascular_access_location) && (
-        <View className='detail-card'>
+        <ContentCard>
           <Text className='section-title'>血管通路</Text>
           <Row label='通路类型' value={rx.vascular_access_type} />
           <Row label='通路位置' value={rx.vascular_access_location} />
-        </View>
+        </ContentCard>
       )}
 
       {/* 超滤与干体重 */}
       {(rx.target_ultrafiltration_ml != null || rx.target_dry_weight != null) && (
-        <View className='detail-card'>
+        <ContentCard>
           <Text className='section-title'>超滤目标</Text>
           <Row label='目标超滤量' value={rx.target_ultrafiltration_ml != null ? `${rx.target_ultrafiltration_ml} ml` : null} />
           <Row label='目标干体重' value={rx.target_dry_weight != null ? `${rx.target_dry_weight} kg` : null} />
-        </View>
+        </ContentCard>
       )}
 
       {/* 备注 */}
       {rx.notes && (
-        <View className='detail-card'>
+        <ContentCard>
           <Text className='section-title'>备注</Text>
           <Text className='notes-text'>{rx.notes}</Text>
-        </View>
+        </ContentCard>
       )}
-    </View>
+    </PageShell>
   );
 }