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

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

@@ -1,18 +1,16 @@
 @import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
 
-.alert-list-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 120px;
-}
+// PageShell 已接管：min-height, background, padding
+// SearchSection 已接管：筛选标签栏
+// ContentCard 已接管：alert-card 背景/圆角/阴影/触摸反馈
+// StatusTag 已接管：告警严重度和状态标签样式
+// PaginationBar 已接管：分页控件
 
 .alert-list-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .alert-list-title {
@@ -29,126 +27,47 @@
 .alert-cards {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--tk-gap-md);
 }
 
-.alert-card {
-  background: $card;
-  border-radius: $r-lg;
-  padding: 24px;
-  box-shadow: $shadow-sm;
+// 告警卡片左侧彩色边框 — 业务特有，不归 ContentCard
+.alert-card--critical {
+  border-left: 4px solid $dan;
+}
+
+.alert-card--warning {
   border-left: 4px solid $wrn;
-
-  &:active {
-    background: $bd-l;
-  }
-
-  &--critical {
-    border-left-color: $dan;
-  }
-
-  &--info {
-    border-left-color: $tx3;
-  }
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-  }
-
-  &__title {
-    font-size: var(--tk-font-body-lg);
-    font-weight: 500;
-    color: $tx;
-    margin-bottom: 8px;
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__time {
-    font-size: var(--tk-font-body);
-    color: $tx3;
-  }
 }
 
-.alert-severity {
-  font-size: var(--tk-font-body);
-  font-weight: 600;
-  padding: 4px 12px;
-  border-radius: $r-sm;
-
-  &--info {
-    background: $bd-l;
-    color: $tx2;
-  }
-
-  &--warning {
-    background: $wrn-l;
-    color: $wrn;
-  }
-
-  &--critical {
-    background: $dan-l;
-    color: $dan;
-  }
-
-  &--urgent {
-    background: $dan-l;
-    color: $dan;
-  }
+.alert-card--info {
+  border-left: 4px solid $tx3;
 }
 
-.alert-status {
-  font-size: var(--tk-font-body);
-  padding: 4px 12px;
-  border-radius: $r-sm;
-
-  &--pending {
-    background: $wrn-l;
-    color: $wrn;
-  }
-
-  &--acknowledged {
-    background: $pri-l;
-    color: $pri;
-  }
-
-  &--resolved {
-    background: $acc-l;
-    color: $acc;
-  }
-
-  &--dismissed {
-    background: $bd-l;
-    color: $tx3;
-  }
+.alert-card--urgent {
+  border-left: 4px solid $dan;
 }
 
-.alert-pagination {
+.alert-card__header {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  gap: 24px;
-  margin-top: 32px;
-
-  &__btn {
-    font-size: var(--tk-font-h1);
-    color: $pri;
-    padding: 12px 24px;
-
-    &.disabled {
-      color: $tx3;
-    }
-  }
-
-  &__info {
-    font-size: var(--tk-font-h2);
-    color: $tx2;
-  }
+  margin-bottom: 12px;
+}
+
+.alert-card__title {
+  font-size: var(--tk-font-body-lg);
+  font-weight: 500;
+  color: $tx;
+  margin-bottom: 8px;
+}
+
+.alert-card__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.alert-card__time {
+  font-size: var(--tk-font-body);
+  color: $tx3;
 }

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

@@ -1,35 +1,53 @@
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-import { View, Text, ScrollView } from '@tarojs/components';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { View, Text } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { usePageData } from '@/hooks/usePageData';
 import { listAlerts, type Alert } from '@/services/doctor/alerts';
-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 PaginationBar from '@/components/patterns/PaginationBar';
+import SearchSection from '@/components/patterns/SearchSection';
 import ErrorState from '@/components/ErrorState';
 import EmptyState from '@/components/EmptyState';
-import SegmentTabs from '@/components/SegmentTabs';
 import { useElderClass } from '../../../hooks/useElderClass';
 import { safeNavigateTo } from '@/utils/navigate';
 import './index.scss';
 
-const SEVERITY_MAP: Record<string, { label: string; className: string }> = {
-  info: { label: '提示', className: 'alert-severity--info' },
-  warning: { label: '警告', className: 'alert-severity--warning' },
-  critical: { label: '严重', className: 'alert-severity--critical' },
-  urgent: { label: '紧急', className: 'alert-severity--urgent' },
+const SEVERITY_COLOR_MAP: Record<string, 'success' | 'warning' | 'error' | 'default'> = {
+  info: 'default',
+  warning: 'warning',
+  critical: 'error',
+  urgent: 'error',
 };
 
-const STATUS_MAP: Record<string, { label: string; className: string }> = {
-  pending: { label: '待处理', className: 'alert-status--pending' },
-  acknowledged: { label: '已确认', className: 'alert-status--acknowledged' },
-  resolved: { label: '已恢复', className: 'alert-status--resolved' },
-  dismissed: { label: '已忽略', className: 'alert-status--dismissed' },
+const SEVERITY_LABEL: Record<string, string> = {
+  info: '提示',
+  warning: '警告',
+  critical: '严重',
+  urgent: '紧急',
 };
 
-const STATUS_TABS = [
-  { value: '', label: '全部' },
-  { value: 'pending', label: '待处理' },
-  { value: 'acknowledged', label: '已确认' },
-  { value: 'resolved', label: '已恢复' },
+const STATUS_COLOR_MAP: Record<string, 'success' | 'warning' | 'info' | 'default'> = {
+  pending: 'warning',
+  acknowledged: 'info',
+  resolved: 'success',
+  dismissed: 'default',
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  pending: '待处理',
+  acknowledged: '已确认',
+  resolved: '已恢复',
+  dismissed: '已忽略',
+};
+
+const STATUS_FILTERS = [
+  { key: '', label: '全部' },
+  { key: 'pending', label: '待处理' },
+  { key: 'acknowledged', label: '已确认' },
+  { key: 'resolved', label: '已恢复' },
 ];
 
 export default function AlertList() {
@@ -42,8 +60,6 @@ export default function AlertList() {
   const [page, setPage] = useState(1);
   const mountedRef = useRef(false);
 
-  const totalPages = useMemo(() => Math.ceil(total / 20), [total]);
-
   const loadAlerts = useCallback(async () => {
     setLoading(true);
     setError(false);
@@ -65,7 +81,6 @@ export default function AlertList() {
 
   const { trigger } = usePageData(loadAlerts);
 
-  // tab/page 变化时重新加载（跳过首次 mount，由 usePageData 的 useDidShow 处理）
   useEffect(() => {
     if (mountedRef.current) {
       trigger();
@@ -94,89 +109,79 @@ export default function AlertList() {
     return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
   };
 
-  if (loading && alerts.length === 0) return <Loading />;
+  if (loading && alerts.length === 0) return <LoadingCard count={3} />;
 
   if (error) {
     return (
-      <ScrollView scrollY className={`alert-list-page ${modeClass}`}>
-        <View className='alert-list-header'>
-          <Text className='alert-list-title'>告警列表</Text>
-        </View>
-        <View className='alert-tabs'>
-          {STATUS_TABS.map((tab) => (
-            <Text
-              key={tab.value}
-              className={`alert-tab ${activeTab === tab.value ? 'alert-tab--active' : ''}`}
-              onClick={() => handleTabChange(tab.value)}
-            >
-              {tab.label}
-            </Text>
-          ))}
-        </View>
+      <PageShell safeBottom className={modeClass}>
+        <SearchSection
+          value=""
+          onChange={() => {}}
+          filters={STATUS_FILTERS}
+          activeFilter={activeTab}
+          onFilterChange={handleTabChange}
+        />
         <ErrorState onRetry={loadAlerts} />
-      </ScrollView>
+      </PageShell>
     );
   }
 
   return (
-    <ScrollView scrollY className={`alert-list-page ${modeClass}`}>
-      <View className='alert-list-header'>
-        <Text className='alert-list-title'>告警列表</Text>
-        <Text className='alert-list-count'>共 {total} 条</Text>
+    <PageShell safeBottom className={modeClass}>
+      <View className="alert-list-header">
+        <Text className="alert-list-title">告警列表</Text>
+        <Text className="alert-list-count">共 {total} 条</Text>
       </View>
 
-      <SegmentTabs tabs={STATUS_TABS.map(t => ({ key: t.value, label: t.label }))} activeKey={activeTab} onChange={handleTabChange} variant="pill" />
+      <SearchSection
+        value=""
+        onChange={() => {}}
+        filters={STATUS_FILTERS}
+        activeFilter={activeTab}
+        onFilterChange={handleTabChange}
+      />
 
       {alerts.length === 0 ? (
-        <EmptyState description='暂无告警' />
+        <EmptyState text="暂无告警" />
       ) : (
-        <View className='alert-cards'>
-          {alerts.map((alert) => {
-            const severity = SEVERITY_MAP[alert.severity] ?? SEVERITY_MAP.info;
-            const status = STATUS_MAP[alert.status] ?? STATUS_MAP.pending;
-            return (
-              <View
-                key={alert.id}
-                className='alert-card'
-                onClick={() => handleAlertClick(alert)}
-              >
-                <View className='alert-card__header'>
-                  <Text className={`alert-severity ${severity.className}`}>
-                    {severity.label}
-                  </Text>
-                  <Text className={`alert-status ${status.className}`}>
-                    {status.label}
-                  </Text>
-                </View>
-                <Text className='alert-card__title'>{alert.title}</Text>
-                <View className='alert-card__footer'>
-                  <Text className='alert-card__time'>{formatTime(alert.created_at)}</Text>
-                </View>
+        <View className="alert-cards">
+          {alerts.map((alert) => (
+            <ContentCard
+              key={alert.id}
+              onPress={() => handleAlertClick(alert)}
+              className={`alert-card--${alert.severity || 'info'}`}
+            >
+              <View className="alert-card__header">
+                <StatusTag
+                  status={alert.severity}
+                  colorMap={SEVERITY_COLOR_MAP}
+                  size="sm"
+                >
+                  {SEVERITY_LABEL[alert.severity] || '提示'}
+                </StatusTag>
+                <StatusTag
+                  status={alert.status}
+                  colorMap={STATUS_COLOR_MAP}
+                  size="sm"
+                >
+                  {STATUS_LABEL[alert.status] || '未知'}
+                </StatusTag>
               </View>
-            );
-          })}
+              <Text className="alert-card__title">{alert.title}</Text>
+              <View className="alert-card__footer">
+                <Text className="alert-card__time">{formatTime(alert.created_at)}</Text>
+              </View>
+            </ContentCard>
+          ))}
         </View>
       )}
 
-      {total > 20 && (
-        <View className='alert-pagination'>
-          <Text
-            className={`alert-pagination__btn ${page <= 1 ? 'disabled' : ''}`}
-            onClick={() => page > 1 && setPage(page - 1)}
-          >
-            上一页
-          </Text>
-          <Text className='alert-pagination__info'>
-            {page} / {totalPages}
-          </Text>
-          <Text
-            className={`alert-pagination__btn ${page >= totalPages ? 'disabled' : ''}`}
-            onClick={() => page < totalPages && setPage(page + 1)}
-          >
-            下一页
-          </Text>
-        </View>
-      )}
-    </ScrollView>
+      <PaginationBar
+        current={page}
+        total={total}
+        pageSize={20}
+        onChange={setPage}
+      />
+    </PageShell>
   );
 }