refactor(mp): 迁移医生核心详情页 — 使用统一组件库 (6/12)

随访详情、患者详情页: - ScrollView → PageShell 替代手写 page 容器 - .section → ContentCard 替代手写卡片样式 - 删除通用 page 容器和 card 样式，保留业务布局样式
2026-05-16 01:16:32 +08:00
parent 5e230ba1b5
commit 85701ddeb2
4 changed files with 28 additions and 54 deletions
--- a/apps/miniprogram/src/pages/pkg-doctor-core/followup/detail/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/followup/detail/index.scss
@@ -1,21 +1,6 @@
@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';

-.followup-detail {
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 120px;
-}
-
-.section {
-  background: $card;
-  border-radius: $r-lg;
-  padding: 28px;
-  margin-bottom: 20px;
-  box-shadow: $shadow-sm;
-}
-
 .section-title {
  @include section-title;
 }
--- a/apps/miniprogram/src/pages/pkg-doctor-core/followup/detail/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/followup/detail/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react';
-import { View, Text, Textarea, ScrollView, Picker } from '@tarojs/components';
+import { View, Text, Textarea, Picker } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import { usePageData } from '@/hooks/usePageData';
 import {
@@ -8,6 +8,8 @@ import {
  type FollowUpTask, type FollowUpRecord,
 } from '@/services/doctor/followup';
 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';

@@ -93,13 +95,13 @@ export default function FollowUpDetail() {
  const formatDate = (d: string) => new Date(d).toLocaleDateString('zh-CN');

  if (loading) return <Loading />;
-  if (!task) return <View className={`error-text ${modeClass}`}><Text>任务加载失败</Text></View>;
+  if (!task) return <PageShell className={modeClass}><View className='error-text'><Text>任务加载失败</Text></View></PageShell>;

  const canSubmit = task.status === 'in_progress' || task.status === 'pending' || task.status === 'overdue';

  return (
-    <ScrollView scrollY className={`followup-detail ${modeClass}`}>
-      <View className='section'>
+    <PageShell className={modeClass}>
+      <ContentCard>
        <View className='task-header'>
          <Text className='task-header__title'>随访详情</Text>
          <Text className={`task-header__status task-header__status--${task.status}`}>
@@ -126,11 +128,11 @@ export default function FollowUpDetail() {
            <Text className='task-template__text'>{task.content_template}</Text>
          </View>
        )}
-      </View>
+      </ContentCard>

      {/* 历史记录 */}
      {records.length > 0 && (
-        <View className='section'>
+        <ContentCard>
          <Text className='section-title'>历史记录</Text>
          {records.map((r) => (
            <View key={r.id} className='record-item'>
@@ -140,12 +142,12 @@ export default function FollowUpDetail() {
              {r.medical_advice && <Text className='record-item__text'>医嘱: {r.medical_advice}</Text>}
            </View>
          ))}
-        </View>
+        </ContentCard>
      )}

      {/* 填写表单 */}
      {canSubmit && (
-        <View className='section'>
+        <ContentCard>
          <Text className='section-title'>记录随访</Text>
          {(task.status === 'pending' || task.status === 'overdue') && (
            <View className='start-btn' onClick={handleStartTask}>
@@ -193,8 +195,8 @@ export default function FollowUpDetail() {
          <View className={`submit-btn ${submitting ? 'submit-btn--disabled' : ''}`} onClick={handleSubmit}>
            <Text className='submit-btn__text'>{submitting ? '提交中...' : '提交记录'}</Text>
          </View>
-        </View>
+        </ContentCard>
      )}
-    </ScrollView>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-doctor-core/patients/detail/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/patients/detail/index.scss
@@ -1,21 +1,6 @@
@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';

-.patient-detail {
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 120px;
-}
-
-.section {
-  background: $card;
-  border-radius: $r-lg;
-  padding: 28px;
-  margin-bottom: 20px;
-  box-shadow: $shadow-sm;
-}
-
 .section-title {
  @include section-title;
 }
--- a/apps/miniprogram/src/pages/pkg-doctor-core/patients/detail/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/patients/detail/index.tsx
@@ -1,9 +1,11 @@
 import { useState, useCallback } from 'react';
-import { View, Text, ScrollView } from '@tarojs/components';
+import { View, Text } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import { usePageData } from '@/hooks/usePageData';
 import { getPatient, getHealthSummary, type PatientDetail, type HealthSummary } from '@/services/doctor/patient';
 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';

@@ -42,12 +44,12 @@ export default function PatientDetail() {
  };

  if (loading) return <Loading />;
-  if (!patient) return <View className={`error-text ${modeClass}`}><Text>患者信息加载失败</Text></View>;
+  if (!patient) return <PageShell className={modeClass}><View className='error-text'><Text>患者信息加载失败</Text></View></PageShell>;

  return (
-    <ScrollView scrollY className={`patient-detail ${modeClass}`}>
+    <PageShell className={modeClass}>
      {/* 基本信息 */}
-      <View className='section'>
+      <ContentCard>
        <View className='section-header'>
          <Text className='section-title'>基本信息</Text>
        </View>
@@ -57,11 +59,11 @@ export default function PatientDetail() {
          <View className='info-item'><Text className='info-label'>年龄</Text><Text className='info-value'>{calcAge(patient.birth_date)}岁</Text></View>
          {patient.blood_type && <View className='info-item'><Text className='info-label'>血型</Text><Text className='info-value'>{patient.blood_type}</Text></View>}
        </View>
-      </View>
+      </ContentCard>

      {/* 医疗信息 */}
      {(patient.allergy_history || patient.medical_history_summary) && (
-        <View className='section'>
+        <ContentCard>
          <Text className='section-title'>医疗信息</Text>
          {patient.allergy_history && (
            <View className='warning-card'>
@@ -75,12 +77,12 @@ export default function PatientDetail() {
              <Text className='info-block-text'>{patient.medical_history_summary}</Text>
            </View>
          )}
-        </View>
+        </ContentCard>
      )}

      {/* 健康摘要 */}
      {summary && (
-        <View className='section'>
+        <ContentCard>
          <Text className='section-title'>健康概览</Text>
          {summary.latest_vital_signs && (
            <View className='vitals-grid'>
@@ -116,12 +118,12 @@ export default function PatientDetail() {
              <Text className='stat-value stat-value--warn'>{summary.pending_follow_ups} 项</Text>
            </View>
          )}
-        </View>
+        </ContentCard>
      )}

      {/* 近期化验 */}
      {summary?.latest_lab_report && (
-        <View className='section'>
+        <ContentCard>
          <Text className='section-title'>近期化验</Text>
          <View
            className='lab-item'
@@ -135,11 +137,11 @@ export default function PatientDetail() {
              <Text className='lab-item__abnormal'>{summary.latest_lab_report.abnormal_count} 项异常</Text>
            )}
          </View>
-        </View>
+        </ContentCard>
      )}

      {/* 快捷操作 */}
-      <View className='section'>
+      <ContentCard>
        <Text className='section-title'>操作</Text>
        <View className='action-buttons'>
          <View className='action-btn' onClick={() => Taro.navigateTo({ url: `/pages/pkg-doctor-clinical/report/index?patientId=${patientId}` })}>
@@ -149,7 +151,7 @@ export default function PatientDetail() {
            <Text>随访记录</Text>
          </View>
        </View>
-      </View>
-    </ScrollView>
+      </ContentCard>
+    </PageShell>
  );
 }