refactor(mp): 迁移报告列表页 — 使用统一组件库

- PageShell 替代手写 ScrollView + min-height/bg/padding
- SearchSection 替代搜索栏
- ContentCard 替代 report-card 手写样式
- StatusTag 替代 report-card__reviewed 手写标签
- LoadingCard 替代 Loading 组件
- 精简 SCSS：删除 page/search-bar/card 通用样式，保留业务特有样式

apps/miniprogram/src/pages/pkg-doctor-clinical/report/index.scss

@@ -1,26 +1,9 @@
 @import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
 
-.report-page {
+// PageShell 已接管：min-height, background, padding
-  min-height: 100vh;
+// SearchSection 已接管：search-bar
-  background: $bg;
+// ContentCard 已接管：report-card 背景/圆角/阴影/触摸反馈
-  padding: 24px;
+// StatusTag 已接管：reviewed 标签样式
-  padding-bottom: 120px;
-}
-
-.search-bar {
-  margin-bottom: 20px;
-
-  .search-input {
-    background: $card;
-    border-radius: $r;
-    padding: 20px 24px;
-    font-size: var(--tk-font-body-lg);
-    width: 100%;
-    box-sizing: border-box;
-    box-shadow: $shadow-sm;
-  }
-}
 
 .report-count {
   margin-bottom: 16px;
@@ -31,59 +14,44 @@
   }
 }
 
-.report-list {
+.report-cards {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--tk-gap-md);
 }
 
-.report-card {
+.report-card__header {
-  background: $card;
-  border-radius: $r-lg;
-  padding: 28px;
-  box-shadow: $shadow-sm;
-
-  &:active {
-    background: $bd-l;
-  }
-
-  &__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
 }
 
-  &__type {
+.report-card__type {
   font-family: 'Georgia', 'Times New Roman', serif;
   font-size: var(--tk-font-body-lg);
   font-weight: 600;
   color: $tx;
 }
 
-  &__date {
+.report-card__date {
   font-size: var(--tk-font-h2);
   color: $tx3;
 }
 
-  &__indicators {
+.report-card__indicators {
   display: flex;
   align-items: center;
   gap: 16px;
 }
 
-  &__abnormal {
+.report-card__abnormal {
   font-size: var(--tk-font-h1);
   color: $dan;
   font-weight: 600;
 }
 
-  &__normal {
+.report-card__normal {
   font-size: var(--tk-font-h1);
   color: $acc;
 }
-
-  &__reviewed {
-    @include tag($acc-l, $acc);
-  }
-}

apps/miniprogram/src/pages/pkg-doctor-clinical/report/index.tsx

@@ -1,10 +1,14 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { View, Text, Input, ScrollView } from '@tarojs/components';
+import { View, Text } from '@tarojs/components';
 import Taro, { useRouter } from '@tarojs/taro';
 import { usePageData } from '@/hooks/usePageData';
 import { listLabReports, type LabReportItem } from '@/services/doctor/labReport';
 import { listPatients } from '@/services/doctor/patient';
-import Loading from '@/components/Loading';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
+import StatusTag from '@/components/ui/StatusTag';
+import LoadingCard from '@/components/ui/LoadingCard';
+import SearchSection from '@/components/patterns/SearchSection';
 import ErrorState from '@/components/ErrorState';
 import EmptyState from '@/components/EmptyState';
 import { useElderClass } from '../../../hooks/useElderClass';
@@ -68,59 +72,56 @@ export default function ReportList() {
 
   const formatDate = (d: string) => new Date(d).toLocaleDateString('zh-CN');
 
-  if (loading && reports.length === 0) return <Loading />;
+  if (loading && reports.length === 0) return <LoadingCard count={3} />;
   if (error) return <ErrorState onRetry={loadReports} />;
 
   return (
-    <ScrollView scrollY className={`report-page ${modeClass}`}>
+    <PageShell safeBottom className={modeClass}>
       {!patientId && (
-        <View className='search-bar'>
+        <SearchSection
-          <Input
-            className='search-input'
-            placeholder='搜索患者姓名'
           value={searchPatient}
-            onInput={(e) => setSearchPatient(e.detail.value)}
+          onChange={setSearchPatient}
-            confirmType='search'
+          onSearch={handleSearch}
-            onConfirm={handleSearch}
+          placeholder="搜索患者姓名"
         />
-        </View>
       )}
 
       {!currentPatientId ? (
-        <EmptyState text='请搜索并选择患者' />
+        <EmptyState text="请搜索并选择患者" />
       ) : reports.length === 0 ? (
-        <EmptyState text='暂无化验报告' />
+        <EmptyState text="暂无化验报告" />
       ) : (
-        <View className='report-list'>
+        <>
-          <View className='report-count'>
+          <View className="report-count">
             <Text>共 {total} 份报告</Text>
           </View>
+          <View className="report-cards">
             {reports.map((r) => (
-            <View
+              <ContentCard
                 key={r.id}
-              className='report-card'
+                onPress={() => Taro.navigateTo({
-              onClick={() => Taro.navigateTo({
                   url: `/pages/pkg-doctor-clinical/report/detail/index?patientId=${currentPatientId}&id=${r.id}`,
                 })}
               >
-              <View className='report-card__header'>
+                <View className="report-card__header">
-                <Text className='report-card__type'>{r.report_type}</Text>
+                  <Text className="report-card__type">{r.report_type}</Text>
-                <Text className='report-card__date'>{formatDate(r.report_date)}</Text>
+                  <Text className="report-card__date">{formatDate(r.report_date)}</Text>
                 </View>
-              <View className='report-card__indicators'>
+                <View className="report-card__indicators">
                   {(r.abnormal_count ?? 0) > 0 ? (
-                  <Text className='report-card__abnormal'>{r.abnormal_count} 项异常</Text>
+                    <Text className="report-card__abnormal">{r.abnormal_count} 项异常</Text>
                   ) : (
-                  <Text className='report-card__normal'>指标正常</Text>
+                    <Text className="report-card__normal">指标正常</Text>
                   )}
                   {r.status === 'reviewed' && (
-                  <Text className='report-card__reviewed'>已审核</Text>
+                    <StatusTag status="reviewed" size="sm">已审核</StatusTag>
                   )}
                 </View>
-            </View>
+              </ContentCard>
             ))}
           </View>
+        </>
       )}
-    </ScrollView>
+    </PageShell>
   );
 }