refactor(mp): 迁移个人中心 12 个页面 — 统一组件库

线下活动、健康档案、报告列表、随访列表、透析记录、透析处方、诊断列表、用药列表、家庭成员、添加家庭成员、设置、知情同意共 12 个页面迁移： - 最外层容器 → PageShell - SCSS 删除 min-height/background 通用样式
2026-05-16 01:34:05 +08:00
parent 466b6567d1
commit c6bffd4019
24 changed files with 50 additions and 82 deletions
--- a/apps/miniprogram/src/pages/pkg-profile/consents/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/consents/index.scss
@@ -1,12 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.consents-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  @include section-title;
--- a/apps/miniprogram/src/pages/pkg-profile/consents/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/consents/index.tsx
@@ -8,6 +8,7 @@ import type { Consent } from '@/services/consent';
 import EmptyState from '@/components/EmptyState';
 import Loading from '@/components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const CONSENT_TYPE_MAP: Record<string, string> = {
@@ -82,7 +83,7 @@ export default function ConsentList() {
  };

  return (
-    <View className={`consents-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>知情同意</Text>

      <View className='consent-list'>
@@ -123,6 +124,6 @@ export default function ConsentList() {
      )}

      {loading && <Loading />}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss
@@ -1,12 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.diagnoses-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  font-family: 'Georgia', 'Times New Roman', serif;
--- a/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/diagnoses/index.tsx
@@ -7,6 +7,7 @@ import { listDiagnoses, Diagnosis } from '../../../services/health-record';
 import EmptyState from '../../../components/EmptyState';
 import Loading from '../../../components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const TYPE_MAP: Record<string, { label: string; cls: string }> = {
@@ -60,7 +61,7 @@ export default function Diagnoses() {
  });

  return (
-    <View className={`diagnoses-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>诊断记录</Text>

      <View className='diagnosis-list'>
@@ -95,6 +96,6 @@ export default function Diagnoses() {
      )}

      {loading && <Loading />}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss
@@ -1,12 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.dialysis-prescriptions-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  @include section-title;
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.tsx
@@ -8,6 +8,7 @@ import type { DialysisPrescription } from '@/services/dialysis';
 import EmptyState from '@/components/EmptyState';
 import Loading from '@/components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const STATUS_MAP: Record<string, { label: string; cls: string }> = {
@@ -57,7 +58,7 @@ export default function DialysisPrescriptionList() {
  const statusInfo = (s: string) => STATUS_MAP[s] || { label: s, cls: '' };

  return (
-    <View className={`dialysis-prescriptions-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>透析处方</Text>

      <View className='prescription-list'>
@@ -96,6 +97,6 @@ export default function DialysisPrescriptionList() {
      )}

      {loading && <Loading />}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss
@@ -1,12 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.dialysis-records-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  @include section-title;
--- a/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.tsx
@@ -8,6 +8,7 @@ import type { DialysisRecord } from '@/services/dialysis';
 import EmptyState from '@/components/EmptyState';
 import Loading from '@/components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const TYPE_MAP: Record<string, { label: string; cls: string }> = {
@@ -64,7 +65,7 @@ export default function DialysisRecordList() {
  const statusInfo = (s: string) => STATUS_MAP[s] || { label: s, cls: '' };

  return (
-    <View className={`dialysis-records-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>透析记录</Text>

      <View className='record-list'>
@@ -101,6 +102,6 @@ export default function DialysisRecordList() {
      )}

      {loading && <Loading />}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/events/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/events/index.scss
@@ -1,9 +1,8 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

+// PageShell 已接管：min-height, background, padding
 .events-page {
-  min-height: 100vh;
-  background: $bg;
  padding-bottom: 120px;
 }

--- a/apps/miniprogram/src/pages/pkg-profile/events/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/events/index.tsx
@@ -6,6 +6,7 @@ import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
 import { useElderClass } from '@/hooks/useElderClass';
 import { usePageData } from '@/hooks/usePageData';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const STATUS_MAP: Record<string, { label: string; className: string }> = {
@@ -60,7 +61,7 @@ export default function EventsPage() {
  if (loading) return <Loading />;

  return (
-    <ScrollView scrollY className={`events-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <View className='events-header'>
        <Text className='events-header__title'>线下活动</Text>
        <Text className='events-header__subtitle'>参加活动赢取积分</Text>
@@ -111,6 +112,6 @@ export default function EventsPage() {
          })}
        </View>
      )}
-    </ScrollView>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/family-add/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/family-add/index.scss
@@ -1,10 +1,8 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

+// PageShell 已接管：min-height, background, padding
 .family-add-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
  padding-bottom: 160px;
 }

--- a/apps/miniprogram/src/pages/pkg-profile/family-add/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/family-add/index.tsx
@@ -4,6 +4,7 @@ import Taro, { useRouter } from '@tarojs/taro';
 import { createPatient, updatePatient, Patient } from '../../../services/patient';
 import { useElderClass } from '../../../hooks/useElderClass';
 import { useSafeTimeout } from '@/hooks/useSafeTimeout';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const RELATION_OPTIONS = ['本人', '配偶', '父母', '子女', '其他'];
@@ -66,7 +67,7 @@ export default function FamilyAdd() {
  };

  return (
-    <View className={`family-add-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>{editId ? '编辑就诊人' : '添加就诊人'}</Text>

      <View className='form-card'>
@@ -134,6 +135,6 @@ export default function FamilyAdd() {
      >
        <Text className='submit-text'>{submitting ? '提交中...' : editId ? '保存修改' : '确认添加'}</Text>
      </View>
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/family/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/family/index.scss
@@ -1,10 +1,8 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

+// PageShell 已接管：min-height, background, padding
 .family-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
  padding-bottom: 160px;
 }

--- a/apps/miniprogram/src/pages/pkg-profile/family/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/family/index.tsx
@@ -6,6 +6,7 @@ import { listPatients, Patient } from '../../../services/patient';
 import { useAuthStore } from '../../../stores/auth';
 import EmptyState from '../../../components/EmptyState';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 export default function FamilyList() {
@@ -60,7 +61,7 @@ export default function FamilyList() {
  };

  return (
-    <View className={`family-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='family-page-title'>就诊人管理</Text>

      <View className='family-list'>
@@ -103,6 +104,6 @@ export default function FamilyList() {
      <View className='family-add-btn' onClick={goToAdd}>
        <Text className='family-add-text'>添加就诊人</Text>
      </View>
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/followups/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/followups/index.scss
@@ -1,10 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.my-followups-page {
-  min-height: 100vh;
-  background: $bg;
-}
+// PageShell 已接管：min-height, background, padding

 .tab-bar {
  display: flex;
--- a/apps/miniprogram/src/pages/pkg-profile/followups/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/followups/index.tsx
@@ -7,6 +7,7 @@ import EmptyState from '../../../components/EmptyState';
 import ErrorState from '../../../components/ErrorState';
 import Loading from '../../../components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const TABS = [
@@ -60,7 +61,7 @@ export default function MyFollowUps() {
  };

  return (
-    <View className={`my-followups-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <View className='tab-bar'>
        {TABS.map((tab) => (
          <View
@@ -109,6 +110,6 @@ export default function MyFollowUps() {
          )}
        </>
      )}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/health-records/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/health-records/index.scss
@@ -1,12 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.health-records-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  font-family: 'Georgia', 'Times New Roman', serif;
--- a/apps/miniprogram/src/pages/pkg-profile/health-records/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/health-records/index.tsx
@@ -7,6 +7,7 @@ import { listHealthRecords, HealthRecord } from '../../../services/health-record
 import EmptyState from '../../../components/EmptyState';
 import Loading from '../../../components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const TYPE_MAP: Record<string, string> = {
@@ -54,7 +55,7 @@ export default function HealthRecords() {
  });

  return (
-    <View className={`health-records-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>健康记录</Text>

      <View className='record-list'>
@@ -84,6 +85,6 @@ export default function HealthRecords() {
      )}

      {loading && <Loading />}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/medication/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/medication/index.scss
@@ -1,10 +1,8 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

+// PageShell 已接管：min-height, background, padding
 .medication-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
  padding-bottom: 160px;
 }

--- a/apps/miniprogram/src/pages/pkg-profile/medication/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/medication/index.tsx
@@ -12,6 +12,7 @@ import {
  type MedicationReminder,
 } from '../../../services/medication-reminder';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 export default function MedicationReminder() {
@@ -100,17 +101,17 @@ export default function MedicationReminder() {

  if (loading) {
    return (
-      <View className={`medication-page ${modeClass}`}>
+      <PageShell className={modeClass}>
        <Text className='page-title'>用药提醒</Text>
        <View className='medication-loading'>
          <Text className='medication-loading-text'>加载中...</Text>
        </View>
-      </View>
+      </PageShell>
    );
  }

  return (
-    <View className={`medication-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>用药提醒</Text>

      <View className='reminder-list'>
@@ -199,6 +200,6 @@ export default function MedicationReminder() {
          <Text className='add-text'>添加提醒</Text>
        </View>
      )}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/reports/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/reports/index.scss
@@ -1,12 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.my-reports-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  @include section-title;
--- a/apps/miniprogram/src/pages/pkg-profile/reports/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/reports/index.tsx
@@ -7,6 +7,7 @@ import { listReports, LabReport } from '../../../services/report';
 import EmptyState from '../../../components/EmptyState';
 import Loading from '../../../components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 export default function MyReports() {
@@ -64,7 +65,7 @@ export default function MyReports() {
  };

  return (
-    <View className={`my-reports-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>检查报告</Text>

      <View className='report-list'>
@@ -100,6 +101,6 @@ export default function MyReports() {
      {loading && (
        <Loading />
      )}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-profile/settings/index.scss
+++ b/apps/miniprogram/src/pages/pkg-profile/settings/index.scss
@@ -1,11 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.settings-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 32px 24px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  @include section-title;
--- a/apps/miniprogram/src/pages/pkg-profile/settings/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-profile/settings/index.tsx
@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro';
 import { useAuthStore } from '../../../stores/auth';
 import { invalidateHeadersCache, clearRequestCache } from '@/services/request';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 export default function Settings() {
@@ -65,7 +66,7 @@ export default function Settings() {
  };

  return (
-    <View className={`settings-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <Text className='page-title'>设置</Text>

      <View className='settings-group'>
@@ -97,6 +98,6 @@ export default function Settings() {
          <Text className='settings-label logout-label'>退出登录</Text>
        </View>
      </View>
-    </View>
+    </PageShell>
  );
 }