refactor(mp): 迁移随访列表页 — 使用统一组件库 PageShell/ContentCard/StatusTag/LoadingCard/SearchSection

apps/miniprogram/src/pages/pkg-doctor-core/followup/index.scss

@@ -1,13 +1,12 @@
 @import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
 
-.followup-page {
-  min-height: 100vh;
-  background: $bg;
-}
+// PageShell 已接管：min-height, background, padding
+// SearchSection 已接管：标签筛选栏
+// ContentCard 已接管：task-card 背景/圆角/阴影/触摸反馈
+// StatusTag 已接管：任务状态标签
 
 .task-count {
-  padding: 20px 28px;
+  margin-bottom: 16px;
 
   text {
     font-size: var(--tk-font-h2);
@@ -16,56 +15,37 @@
 }
 
 .task-list {
-  padding: 0 24px 120px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--tk-gap-md);
 }
 
-.task-card {
-  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 {
-    font-family: 'Georgia', 'Times New Roman', serif;
-    font-size: var(--tk-font-body-lg);
-    font-weight: 600;
-    color: $tx;
-  }
-
-  &__status {
-    @include tag(transparent, $tx2);
-    font-size: var(--tk-font-body);
-    font-weight: 500;
-  }
-
-  &__patient {
-    font-size: var(--tk-font-h1);
-    color: $tx2;
-    display: block;
-    margin-bottom: 8px;
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__date {
-    font-size: var(--tk-font-h2);
-    color: $tx3;
-  }
+.task-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.task-card__type {
+  font-size: var(--tk-font-body-lg);
+  font-weight: 600;
+  color: $tx;
+}
+
+.task-card__patient {
+  font-size: var(--tk-font-h1);
+  color: $tx2;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.task-card__footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.task-card__date {
+  font-size: var(--tk-font-h2);
+  color: $tx3;
 }

apps/miniprogram/src/pages/pkg-doctor-core/followup/index.tsx

@@ -1,14 +1,16 @@
 import { useState, useEffect, useCallback, useRef } 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 { listFollowUpTasks, type FollowUpTask } from '@/services/doctor/followup';
-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';
-import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag';
-import SegmentTabs from '@/components/SegmentTabs';
 import './index.scss';
 
 const TABS = [
@@ -19,6 +21,13 @@ const TABS = [
   { key: 'overdue', label: '已逾期' },
 ];
 
+const STATUS_COLOR_MAP: Record<string, 'warning' | 'info' | 'success' | 'error'> = {
+  pending: 'warning',
+  in_progress: 'info',
+  completed: 'success',
+  overdue: 'error',
+};
+
 export default function FollowUpList() {
   const router = useRouter();
   const patientId = router.params.patientId || '';
@@ -52,7 +61,6 @@ export default function FollowUpList() {
 
   const { trigger } = usePageData(loadTasks);
 
-  // tab/patientId 变化时重新加载（跳过首次 mount，由 usePageData 的 useDidShow 处理）
   useEffect(() => {
     if (mountedRef.current) {
       trigger();
@@ -74,43 +82,48 @@ export default function FollowUpList() {
     return map[type] || type;
   };
 
-  if (loading && tasks.length === 0) return <Loading />;
+  if (loading && tasks.length === 0) return <LoadingCard count={3} />;
   if (error) return <ErrorState onRetry={loadTasks} />;
 
   return (
-    <ScrollView scrollY className={`followup-page ${modeClass}`}>
-      <SegmentTabs tabs={TABS} activeKey={activeTab} onChange={(key) => setActiveTab(key)} variant="underline" />
+    <PageShell safeBottom className={modeClass}>
+      <SearchSection
+        value=""
+        onChange={() => {}}
+        filters={TABS}
+        activeFilter={activeTab}
+        onFilterChange={(key) => setActiveTab(key)}
+      />
 
-      <View className='task-count'>
+      <View className="task-count">
         <Text>共 {total} 项任务</Text>
       </View>
 
       {tasks.length === 0 ? (
-        <EmptyState text='暂无随访任务' />
+        <EmptyState text="暂无随访任务" />
       ) : (
-        <View className='task-list'>
-          {tasks.map((task) => {
-            return (
-              <View
-                key={task.id}
-                className='task-card'
-                onClick={() => Taro.navigateTo({ url: `/pages/pkg-doctor-core/followup/detail/index?id=${task.id}` })}
-              >
-                <View className='task-card__header'>
-                  <Text className='task-card__type'>{getTypeLabel(task.follow_up_type)}</Text>
-                  <View className='task-card__status' style={getStatusInlineStyle(task.status)}>
-                    <Text>{getStatusLabel(task.status)}</Text>
-                  </View>
-                </View>
-                <Text className='task-card__patient'>{task.patient_name || '未知患者'}</Text>
-                <View className='task-card__footer'>
-                  <Text className='task-card__date'>计划日期: {formatDate(task.planned_date)}</Text>
-                </View>
+        <View className="task-list">
+          {tasks.map((task) => (
+            <ContentCard
+              key={task.id}
+              onPress={() => Taro.navigateTo({ url: `/pages/pkg-doctor-core/followup/detail/index?id=${task.id}` })}
+            >
+              <View className="task-card__header">
+                <Text className="task-card__type">{getTypeLabel(task.follow_up_type)}</Text>
+                <StatusTag
+                  status={task.status}
+                  colorMap={STATUS_COLOR_MAP}
+                  size="sm"
+                />
               </View>
-            );
-          })}
+              <Text className="task-card__patient">{task.patient_name || '未知患者'}</Text>
+              <View className="task-card__footer">
+                <Text className="task-card__date">计划日期: {formatDate(task.planned_date)}</Text>
+              </View>
+            </ContentCard>
+          ))}
         </View>
       )}
-    </ScrollView>
+    </PageShell>
   );
 }