refactor(mp): 迁移患者咨询列表页 — 使用统一组件库

- PageShell 替代手写 min-height/bg/padding
- ContentCard 替代手写 session-card 卡片样式
- StatusTag 替代手写 session-tag 状态标签
- LoadingCard 替代初始加载态
- EmptyState 替代手写空状态
- ErrorState 替代手写错误状态
- 精简 SCSS 删除已接管样式，保留按钮/头像/角标等页面特有样式

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/miniprogram/src/pages/consultation/index.tsx

@@ -4,17 +4,17 @@ import Taro, { useReachBottom } from '@tarojs/taro';
 import { usePageData } from '@/hooks/usePageData';
 import { useAuthStore } from '@/stores/auth';
 import { listConsultations, ConsultationSession } from '@/services/consultation';
-import Loading from '../../components/Loading';
-import GuestGuard from '../../components/GuestGuard';
+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 EmptyState from '@/components/EmptyState';
+import ErrorState from '@/components/ErrorState';
+import Loading from '@/components/Loading';
+import GuestGuard from '@/components/GuestGuard';
 import { useElderClass } from '../../hooks/useElderClass';
 import './index.scss';
 
-function getStatusTag(status: string) {
-  if (status === 'active') return { label: '进行中', cls: 'tag-ok' };
-  if (status === 'pending') return { label: '等待接诊', cls: 'tag-warn' };
-  return { label: { closed: '已结束', cancelled: '已取消' }[status] || status, cls: 'tag-default' };
-}
-
 function formatTime(iso: string): string {
   if (!iso) return '';
   const d = new Date(iso);
@@ -33,6 +33,22 @@ function formatTime(iso: string): string {
   return `${m}-${day}`;
 }
 
+/** 咨询状态到 StatusTag status 的映射 */
+function getConsultStatus(status: string): string {
+  if (status === 'active') return 'active';
+  if (status === 'pending') return 'pending';
+  if (status === 'closed') return 'completed';
+  if (status === 'cancelled') return 'cancelled';
+  return status;
+}
+
+const STATUS_LABEL_MAP: Record<string, string> = {
+  active: '进行中',
+  pending: '等待接诊',
+  closed: '已结束',
+  cancelled: '已取消',
+};
+
 export default function Consultation() {
   const user = useAuthStore((s) => s.user);
   const [sessions, setSessions] = useState<ConsultationSession[]>([]);
@@ -60,6 +76,7 @@ export default function Consultation() {
         setSessions([]);
         setTotal(0);
       }
+      setError('加载失败，请稍后重试');
       Taro.showToast({ title: '加载失败，下拉重试', icon: 'none' });
     } finally {
       setLoading(false);
@@ -85,52 +102,59 @@ export default function Consultation() {
     Taro.navigateTo({ url: `/pages/pkg-consultation/detail/index?id=${session.id}` });
   };
 
-  return (
-    <View className={`consultation-page ${modeClass}`}>
-      {!user ? (
+  if (!user) {
+    return (
+      <PageShell safeBottom className={modeClass}>
         <GuestGuard title='请先登录' desc='登录后即可与医生在线交流' />
+      </PageShell>
+    );
+  }
+
+  if (loading && sessions.length === 0) {
+    return <LoadingCard count={4} layout="list" />;
+  }
+
+  if (error && sessions.length === 0) {
+    return (
+      <PageShell safeBottom className={modeClass}>
+        <ErrorState text={error} onRetry={() => loadSessions(1, true)} />
+      </PageShell>
+    );
+  }
+
+  return (
+    <PageShell safeBottom className={modeClass}>
+      {/* 副标题 */}
+      <Text className='consultation-subtitle'>随时随地，连接专业医生</Text>
+
+      {/* 发起咨询按钮 */}
+      <View
+        className='consultation-create-btn'
+        onClick={() => Taro.navigateTo({ url: '/pages/consultation/create/index' })}
+      >
+        <Text className='consultation-create-btn-text'>发起咨询</Text>
+      </View>
+
+      {/* 会话列表 */}
+      {sessions.length === 0 ? (
+        <EmptyState
+          icon='问'
+          text='暂无咨询记录'
+          hint='发起咨询后即可在这里与医生交流'
+        />
       ) : (
-      <View className='consultation-body'>
-        {/* 副标题 */}
-        <Text className='consultation-subtitle'>随时随地，连接专业医生</Text>
-
-        {/* 发起咨询按钮 — 实心主色 */}
-        <View
-          className='consultation-create-btn'
-          onClick={() => Taro.navigateTo({ url: '/pages/consultation/create/index' })}
-        >
-          <Text className='consultation-create-btn-text'>发起咨询</Text>
-        </View>
-
-        {/* 内容区 */}
-        {loading ? (
-          <View className='consultation-center'>
-            <Loading text='加载中...' />
-          </View>
-        ) : error ? (
-          <View className='consultation-center'>
-            <Text className='consultation-error'>{error}</Text>
-          </View>
-        ) : sessions.length === 0 ? (
-          <View className='consultation-empty'>
-            <View className='empty-icon'>
-              <Text className='empty-char'>问</Text>
-            </View>
-            <Text className='empty-title'>暂无咨询记录</Text>
-            <Text className='empty-hint'>发起咨询后即可在这里与医生交流</Text>
-          </View>
-        ) : (
-          <View className='session-list'>
-            {sessions.map((session) => {
-              const tag = getStatusTag(session.status);
-              const initial = (session.subject || '咨').charAt(0);
-              const isClosed = session.status === 'closed' || session.status === 'cancelled';
-              return (
-                <View
-                  key={session.id}
-                  className={`session-card ${isClosed ? 'session-card-closed' : ''}`}
-                  onClick={() => handleTapSession(session)}
-                >
+        <View className='session-list'>
+          {sessions.map((session) => {
+            const initial = (session.subject || '咨').charAt(0);
+            const isClosed = session.status === 'closed' || session.status === 'cancelled';
+            return (
+              <ContentCard
+                key={session.id}
+                className={isClosed ? 'session-card-closed' : ''}
+                activeFeedback="opacity"
+                onPress={() => handleTapSession(session)}
+              >
+                <View className='session-inner'>
                   <View className='session-avatar'>
                     <Text className='session-avatar-char'>{initial}</Text>
                   </View>
@@ -146,7 +170,9 @@ export default function Consultation() {
                       </Text>
                     </View>
                     <View className='session-meta'>
-                      <Text className={`session-tag ${tag.cls}`}>{tag.label}</Text>
+                      <StatusTag status={getConsultStatus(session.status)} size="sm">
+                        {STATUS_LABEL_MAP[session.status] || session.status}
+                      </StatusTag>
                     </View>
                     <View className='session-message-row'>
                       <Text className='session-message'>
@@ -162,12 +188,13 @@ export default function Consultation() {
                     </View>
                   </View>
                 </View>
-              );
-            })}
-          </View>
-        )}
-      </View>
+              </ContentCard>
+            );
+          })}
+        </View>
       )}
-    </View>
+
+      {loading && sessions.length > 0 && <Loading />}
+    </PageShell>
   );
 }