refactor(mp): 迁移创建页 — 使用 PageShell + ContentCard 统一组件库

处方创建、透析记录创建、预约创建三个表单页迁移： - 最外层容器 ScrollView/View → PageShell - 表单分组 section View → ContentCard - SCSS 删除 min-height/background/box-shadow 通用样式
2026-05-16 01:33:06 +08:00
parent 900c9babc3
commit 4dd5a1b4d9
6 changed files with 47 additions and 59 deletions
--- a/apps/miniprogram/src/pages/appointment/create/index.scss
+++ b/apps/miniprogram/src/pages/appointment/create/index.scss
@@ -1,9 +1,9 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

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

@@ -132,11 +132,7 @@

 /* 确认卡片 (step 3 医生信息) */
 .confirm-card {
-  background: $card;
-  border-radius: $r;
-  padding: 24px 28px;
  margin-bottom: 24px;
-  box-shadow: $shadow-sm;
 }

 .confirm-row {
--- a/apps/miniprogram/src/pages/appointment/create/index.tsx
+++ b/apps/miniprogram/src/pages/appointment/create/index.tsx
@@ -7,6 +7,8 @@ import { TEMPLATE_IDS } from '@/services/wechat-templates';
 import { trackEvent } from '@/services/analytics';
 import StepIndicator from '../../../components/StepIndicator';
 import WeekCalendar from '../../../components/WeekCalendar';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../hooks/useElderClass';
 import { useSafeTimeout } from '@/hooks/useSafeTimeout';
 import './index.scss';
@@ -153,7 +155,7 @@ export default function AppointmentCreate() {
  };

  return (
-    <View className={`create-page ${modeClass}`}>
+    <PageShell padding="none" safeBottom={false} scroll={false} className={modeClass}>
      <StepIndicator
        steps={[{ label: '选科室' }, { label: '选医生' }, { label: '选时段' }]}
        current={currentStep}
@@ -222,7 +224,7 @@ export default function AppointmentCreate() {
        <View className='step-content'>
          <Text className='step-title'>选择就诊时间</Text>

-          <View className='confirm-card'>
+          <ContentCard className='confirm-card'>
            <View className='confirm-row'>
              <View className='confirm-icon-wrap'>
                <Text className='confirm-icon-serif'>医</Text>
@@ -235,7 +237,7 @@ export default function AppointmentCreate() {
                <Text className='confirm-dept-text'>{department}</Text>
              </View>
            </View>
-          </View>
+          </ContentCard>

          <WeekCalendar
            scheduledDates={scheduledDates}
@@ -295,6 +297,6 @@ export default function AppointmentCreate() {
          </View>
        )}
      </View>
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/create/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/create/index.scss
@@ -1,19 +1,12 @@
@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';

-.create-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 200px;
-}
+// PageShell 已接管：min-height, background, padding
+// ContentCard 已接管：background, border-radius, padding, box-shadow

+/* ─── 表单分组间距（ContentCard 外层补充） ─── */
 .section {
-  background: $card;
-  border-radius: $r;
-  padding: 24px;
  margin-bottom: 16px;
-  box-shadow: $shadow-sm;
 }

 .section-title {
--- a/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/create/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/create/index.tsx
@@ -1,10 +1,12 @@
 import { useState, useEffect } from 'react';
-import { View, Text, Input, Textarea, Picker, ScrollView } from '@tarojs/components';
+import { View, Text, Input, Textarea, Picker } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import {
  getDialysisRecord, updateDialysisRecord, createDialysisRecord,
 } from '@/services/doctor/dialysis';
 import Loading from '@/components/Loading';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../../hooks/useElderClass';
 import { useSafeTimeout } from '@/hooks/useSafeTimeout';
 import './index.scss';
@@ -173,8 +175,8 @@ export default function DialysisCreate() {
  );

  return (
-    <ScrollView scrollY className={`create-page ${modeClass}`}>
-      <View className='section'>
+    <PageShell safeBottom={false} className={modeClass}>
+      <ContentCard className='section'>
        <Text className='section-title'>基本信息</Text>
        <View className='form-row'>
          <Text className='form-label'>透析日期</Text>
@@ -208,16 +210,16 @@ export default function DialysisCreate() {
        </View>
        <InputField label='透析时长' field='dialysis_duration' placeholder='分钟' type='number' />
        <InputField label='血流速' field='blood_flow_rate' placeholder='ml/min' type='number' />
-      </View>
+      </ContentCard>

-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>体重</Text>
        <InputField label='干体重' field='dry_weight' placeholder='kg' />
        <InputField label='透前体重' field='pre_weight' placeholder='kg' />
        <InputField label='透后体重' field='post_weight' placeholder='kg' />
-      </View>
+      </ContentCard>

-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>血压与心率</Text>
        <InputField label='透前收缩压' field='pre_bp_systolic' placeholder='mmHg' type='number' />
        <InputField label='透前舒张压' field='pre_bp_diastolic' placeholder='mmHg' type='number' />
@@ -225,9 +227,9 @@ export default function DialysisCreate() {
        <InputField label='透后舒张压' field='post_bp_diastolic' placeholder='mmHg' type='number' />
        <InputField label='透前心率' field='pre_heart_rate' placeholder='bpm' type='number' />
        <InputField label='透后心率' field='post_heart_rate' placeholder='bpm' type='number' />
-      </View>
+      </ContentCard>

-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>超滤与备注</Text>
        <InputField label='超滤量' field='ultrafiltration_volume' placeholder='ml' type='number' />
        <View className='form-row form-row--textarea'>
@@ -240,11 +242,11 @@ export default function DialysisCreate() {
            maxlength={500}
          />
        </View>
-      </View>
+      </ContentCard>

      <View className={`submit-btn ${submitting ? 'submit-btn--disabled' : ''}`} onClick={handleSubmit}>
        <Text className='submit-btn__text'>{submitting ? '提交中...' : isEdit ? '更新记录' : '创建记录'}</Text>
      </View>
-    </ScrollView>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/create/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/create/index.scss
@@ -1,19 +1,12 @@
@import '../../../../styles/variables.scss';
@import '../../../../styles/mixins.scss';

-.create-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 200px;
-}
+// PageShell 已接管：min-height, background, padding
+// ContentCard 已接管：background, border-radius, padding, box-shadow

+/* ─── 表单分组间距（ContentCard 外层补充） ─── */
 .section {
-  background: $card;
-  border-radius: $r;
-  padding: 24px;
  margin-bottom: 16px;
-  box-shadow: $shadow-sm;
 }

 .section-title {
--- a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/create/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/create/index.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react';
-import { View, Text, Input, Textarea, Picker, ScrollView } from '@tarojs/components';
+import { View, Text, Input, Textarea, Picker } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import { createDialysisPrescription } from '@/services/doctor/dialysis';
 import Loading from '@/components/Loading';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../../hooks/useElderClass';
 import { useSafeTimeout } from '@/hooks/useSafeTimeout';
 import './index.scss';
@@ -118,31 +120,31 @@ export default function PrescriptionCreate() {
  );

  return (
-    <ScrollView scrollY className={`create-page ${modeClass}`}>
+    <PageShell safeBottom={false} className={modeClass}>
      {/* 透析器 */}
-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>透析器</Text>
        <InputField label='透析器型号' field='dialyzer_model' placeholder='请输入型号' type='text' />
        <InputField label='膜面积' field='membrane_area' placeholder='m²' />
-      </View>
+      </ContentCard>

      {/* 透析液 */}
-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>透析液配比</Text>
        <InputField label='钾浓度' field='dialysate_potassium' placeholder='mmol/L' />
        <InputField label='钙浓度' field='dialysate_calcium' placeholder='mmol/L' />
        <InputField label='碳酸氢盐' field='dialysate_bicarbonate' placeholder='mmol/L' />
-      </View>
+      </ContentCard>

      {/* 抗凝 */}
-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>抗凝方案</Text>
        <InputField label='抗凝类型' field='anticoagulation_type' placeholder='请输入' type='text' />
        <InputField label='抗凝剂量' field='anticoagulation_dose' placeholder='请输入' type='text' />
-      </View>
+      </ContentCard>

      {/* 参数 */}
-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>参数设置</Text>
        <InputField label='目标超滤量' field='target_ultrafiltration_ml' placeholder='ml' type='number' />
        <InputField label='目标干体重' field='target_dry_weight' placeholder='kg' />
@@ -150,17 +152,17 @@ export default function PrescriptionCreate() {
        <InputField label='透析液流量' field='dialysate_flow_rate' placeholder='ml/min' type='number' />
        <InputField label='每周频次' field='frequency_per_week' placeholder='次/周' type='number' />
        <InputField label='每次时长' field='duration_minutes' placeholder='分钟' type='number' />
-      </View>
+      </ContentCard>

      {/* 血管通路 */}
-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>血管通路</Text>
        <InputField label='通路类型' field='vascular_access_type' placeholder='请输入' type='text' />
        <InputField label='通路位置' field='vascular_access_location' placeholder='请输入' type='text' />
-      </View>
+      </ContentCard>

      {/* 生效日期 */}
-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>生效日期</Text>
        <View className='form-row'>
          <Text className='form-label'>生效日期</Text>
@@ -178,10 +180,10 @@ export default function PrescriptionCreate() {
            </Text>
          </Picker>
        </View>
-      </View>
+      </ContentCard>

      {/* 备注 */}
-      <View className='section'>
+      <ContentCard className='section'>
        <Text className='section-title'>备注</Text>
        <Textarea
          className='form-textarea'
@@ -190,11 +192,11 @@ export default function PrescriptionCreate() {
          onInput={(e) => updateField('notes', e.detail.value)}
          maxlength={500}
        />
-      </View>
+      </ContentCard>

      <View className={`submit-btn ${submitting ? 'submit-btn--disabled' : ''}`} onClick={handleSubmit}>
        <Text className='submit-btn__text'>{submitting ? '提交中...' : '创建处方'}</Text>
      </View>
-    </ScrollView>
+    </PageShell>
  );
 }