From 3fb5a77ac007c8e3cc803e1e8350826ff6b32d62 Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Fri, 15 May 2026 23:11:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(mp):=20=E7=BB=9F=E4=B8=80=E7=A9=BA?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=BA=20EmptyState=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=20+=20=E6=B8=85=E7=90=86=E6=97=A7=20Tab=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 4 个页面的内联空状态替换为共享 EmptyState 组件
  (messages / action-inbox / pkg-health/alerts / mall)
- 清理 10 个页面的旧 Tab CSS（迁移到 SegmentTabs 后不再需要）
- 清理 elder-mode 中已删除的 mall-empty-state 引用
---
 apps/miniprogram/src/pages/health/index.scss  | 45 ---------------
 apps/miniprogram/src/pages/mall/index.scss    | 55 -------------------
 apps/miniprogram/src/pages/mall/index.tsx     | 26 +++------
 .../miniprogram/src/pages/messages/index.scss | 13 -----
 apps/miniprogram/src/pages/messages/index.tsx |  9 +--
 .../pkg-doctor-clinical/alerts/index.scss     | 20 -------
 .../pkg-doctor-clinical/dialysis/index.scss   | 37 -------------
 .../prescription/index.scss                   | 37 -------------
 .../pkg-doctor-core/action-inbox/index.scss   | 48 ----------------
 .../pkg-doctor-core/action-inbox/index.tsx    |  5 +-
 .../pkg-doctor-core/consultation/index.scss   | 32 -----------
 .../pages/pkg-doctor-core/followup/index.scss | 34 ------------
 .../src/pages/pkg-health/alerts/index.scss    | 31 -----------
 .../src/pages/pkg-health/alerts/index.tsx     |  3 +-
 .../src/pages/pkg-health/trend/index.scss     | 23 --------
 .../src/pages/pkg-mall/orders/index.scss      | 39 -------------
 apps/miniprogram/src/styles/elder-mode.scss   |  5 --
 17 files changed, 16 insertions(+), 446 deletions(-)

diff --git a/apps/miniprogram/src/pages/health/index.scss b/apps/miniprogram/src/pages/health/index.scss
index 0811592..081f24a 100644
--- a/apps/miniprogram/src/pages/health/index.scss
+++ b/apps/miniprogram/src/pages/health/index.scss
@@ -20,51 +20,6 @@
   color: $tx;
 }
 
-/* ─── 类型 Tab ─── */
-.vital-tabs {
-  display: flex;
-  padding: 0 0 16px;
-  gap: 8px;
-}
-
-.vital-tab {
-  flex: 1;
-  height: 48px;
-  border-radius: $r-sm;
-  background: $surface-alt;
-  @include flex-center;
-  position: relative;
-
-  &:active {
-    opacity: 0.85;
-  }
-
-  &.vital-tab-active {
-    background: $pri;
-    box-shadow: 0 2px 8px rgba(196, 98, 58, 0.25);
-
-    .vital-tab-text {
-      color: $white;
-    }
-  }
-}
-
-.vital-tab-text {
-  font-size: var(--tk-font-cap);
-  font-weight: 600;
-  color: $tx2;
-}
-
-.vital-tab-dot {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: $wrn;
-}
-
 /* ─── 录入区 ─── */
 .input-section {
   margin-bottom: 20px;
diff --git a/apps/miniprogram/src/pages/mall/index.scss b/apps/miniprogram/src/pages/mall/index.scss
index 318fcac..b1eef69 100644
--- a/apps/miniprogram/src/pages/mall/index.scss
+++ b/apps/miniprogram/src/pages/mall/index.scss
@@ -207,58 +207,3 @@
   }
 }
 
-/* ─── 空状态 ─── */
-.mall-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 100px 40px;
-}
-
-.empty-icon {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background: $pri-l;
-  @include flex-center;
-  margin-bottom: 32px;
-}
-
-.empty-char {
-  font-family: 'Georgia', 'Times New Roman', serif;
-  font-size: var(--tk-font-hero);
-  font-weight: bold;
-  color: $pri;
-  line-height: 1;
-}
-
-.empty-title {
-  font-size: var(--tk-font-body-lg);
-  font-weight: 600;
-  color: $tx;
-  margin-bottom: 12px;
-}
-
-.empty-hint {
-  font-size: var(--tk-font-h1);
-  color: var(--tk-text-secondary);
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.empty-action {
-  background: $pri;
-  border-radius: $r;
-  padding: 16px 48px;
-
-  &:active {
-    opacity: 0.85;
-  }
-}
-
-.empty-action-text {
-  font-size: var(--tk-font-body-lg);
-  color: $white;
-  font-weight: 600;
-}
diff --git a/apps/miniprogram/src/pages/mall/index.tsx b/apps/miniprogram/src/pages/mall/index.tsx
index d3b3799..35c9214 100644
--- a/apps/miniprogram/src/pages/mall/index.tsx
+++ b/apps/miniprogram/src/pages/mall/index.tsx
@@ -8,6 +8,7 @@ import { useAuthStore } from '../../stores/auth';
 import { usePointsStore } from '../../stores/points';
 import Loading from '../../components/Loading';
 import ErrorState from '../../components/ErrorState';
+import EmptyState from '../../components/EmptyState';
 import { useElderClass } from '../../hooks/useElderClass';
 import './index.scss';
 
@@ -137,16 +138,13 @@ export default function Mall() {
   if (noProfile) {
     return (
       <View className={`mall-page ${modeClass}`}>
-        <View className='mall-empty-state'>
-          <View className='empty-icon'>
-            <Text className='empty-char'>档</Text>
-          </View>
-          <Text className='empty-title'>请先完善个人档案</Text>
-          <Text className='empty-hint'>建档后即可使用积分商城、签到等功能</Text>
-          <View className='empty-action' onClick={() => Taro.navigateTo({ url: '/pages/pkg-profile/family-add/index' })}>
-            <Text className='empty-action-text'>去建档</Text>
-          </View>
-        </View>
+        <EmptyState
+          icon='档'
+          text='请先完善个人档案'
+          hint='建档后即可使用积分商城、签到等功能'
+          actionText='去建档'
+          onAction={() => Taro.navigateTo({ url: '/pages/pkg-profile/family-add/index' })}
+        />
       </View>
     );
   }
@@ -195,13 +193,7 @@ export default function Mall() {
       {error ? (
         <ErrorState onRetry={() => loadAll()} />
       ) : products.length === 0 && !loading ? (
-        <View className='mall-empty-state'>
-          <View className='empty-icon'>
-            <Text className='empty-char'>礼</Text>
-          </View>
-          <Text className='empty-title'>暂无商品</Text>
-          <Text className='empty-hint'>更多好物即将上架</Text>
-        </View>
+        <EmptyState icon='礼' text='暂无商品' hint='更多好物即将上架' />
       ) : (
         <View className='product-grid'>
           {products.map((item) => (
diff --git a/apps/miniprogram/src/pages/messages/index.scss b/apps/miniprogram/src/pages/messages/index.scss
index de5fadc..884aa0b 100644
--- a/apps/miniprogram/src/pages/messages/index.scss
+++ b/apps/miniprogram/src/pages/messages/index.scss
@@ -86,19 +86,6 @@
   gap: 8px;
 }
 
-.msg-empty {
-  background: $card;
-  border-radius: $r;
-  padding: 48px 24px;
-  text-align: center;
-  box-shadow: $shadow-sm;
-}
-
-.msg-empty-text {
-  font-size: var(--tk-font-cap);
-  color: $tx2;
-}
-
 /* ─── 咨询卡片 ─── */
 .consult-card {
   display: flex;
diff --git a/apps/miniprogram/src/pages/messages/index.tsx b/apps/miniprogram/src/pages/messages/index.tsx
index 2eb2e3a..f949694 100644
--- a/apps/miniprogram/src/pages/messages/index.tsx
+++ b/apps/miniprogram/src/pages/messages/index.tsx
@@ -5,6 +5,7 @@ import { listConsultations, ConsultationSession } from '../../services/consultat
 import { notificationService } from '../../services/notification';
 import Loading from '../../components/Loading';
 import ErrorState from '../../components/ErrorState';
+import EmptyState from '../../components/EmptyState';
 import GuestGuard from '../../components/GuestGuard';
 import { useAuthStore } from '../../stores/auth';
 import { useElderClass } from '../../hooks/useElderClass';
@@ -152,9 +153,7 @@ export default function Messages() {
           loading ? (
             <Loading />
           ) : sessions.length === 0 ? (
-            <View className='msg-empty'>
-              <Text className='msg-empty-text'>暂无咨询消息</Text>
-            </View>
+            <EmptyState text='暂无咨询消息' />
           ) : (
             <View className='msg-list'>
               {sessions.map((session) => {
@@ -201,9 +200,7 @@ export default function Messages() {
           loading ? (
             <Loading />
           ) : notifications.length === 0 ? (
-            <View className='msg-empty'>
-              <Text className='msg-empty-text'>暂无新通知</Text>
-            </View>
+            <EmptyState text='暂无新通知' />
           ) : (
             <View className='msg-list'>
               {notifications.map((n) => {
diff --git a/apps/miniprogram/src/pages/pkg-doctor-clinical/alerts/index.scss b/apps/miniprogram/src/pages/pkg-doctor-clinical/alerts/index.scss
index 751b543..a8fa070 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-clinical/alerts/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/alerts/index.scss
@@ -26,26 +26,6 @@
   color: $tx2;
 }
 
-.alert-tabs {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 24px;
-}
-
-.alert-tab {
-  padding: 10px 24px;
-  border-radius: $r-pill;
-  background: $bd-l;
-  font-size: var(--tk-font-h2);
-  color: $tx2;
-  transition: all 0.2s;
-
-  &--active {
-    background: $pri;
-    color: $card;
-  }
-}
-
 .alert-cards {
   display: flex;
   flex-direction: column;
diff --git a/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/index.scss b/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/index.scss
index d32bceb..0ab9c48 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/dialysis/index.scss
@@ -20,43 +20,6 @@
   color: $tx;
 }
 
-.tabs {
-  display: flex;
-  padding: 0 24px;
-  background: $card;
-  border-bottom: 1px solid $bd-l;
-}
-
-.tab {
-  flex: 1;
-  text-align: center;
-  padding: 20px 0;
-  position: relative;
-
-  &--active {
-    .tab-text {
-      color: $pri;
-      font-weight: bold;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 25%;
-      right: 25%;
-      height: 4px;
-      background: $pri;
-      border-radius: $r-xs;
-    }
-  }
-}
-
-.tab-text {
-  font-size: var(--tk-font-h1);
-  color: $tx2;
-}
-
 .record-list {
   padding: 16px 24px;
 }
diff --git a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss
index cfbd5d3..7f214fd 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-clinical/prescription/index.scss
@@ -20,43 +20,6 @@
   color: $tx;
 }
 
-.tabs {
-  display: flex;
-  padding: 0 24px;
-  background: $card;
-  border-bottom: 1px solid $bd-l;
-}
-
-.tab {
-  flex: 1;
-  text-align: center;
-  padding: 20px 0;
-  position: relative;
-
-  &--active {
-    .tab-text {
-      color: $pri;
-      font-weight: bold;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 25%;
-      right: 25%;
-      height: 4px;
-      background: $pri;
-      border-radius: $r-xs;
-    }
-  }
-}
-
-.tab-text {
-  font-size: var(--tk-font-h1);
-  color: $tx2;
-}
-
 .prescription-list {
   padding: 16px 24px;
 }
diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss
index 66cc545..bd82bbd 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.scss
@@ -6,44 +6,6 @@
   background: $bg;
 }
 
-.inbox-tabs {
-  display: flex;
-  background: $card;
-  padding: 0 16px;
-  border-bottom: 1px solid $bd;
-
-  .inbox-tab {
-    flex: 1;
-    text-align: center;
-    padding: 12px 0;
-    min-height: 48px;
-
-    &.active {
-      .inbox-tab-text {
-        color: $pri;
-        font-weight: 600;
-        position: relative;
-
-        &::after {
-          content: '';
-          position: absolute;
-          bottom: -12px;
-          left: 30%;
-          right: 30%;
-          height: 3px;
-          background: $pri;
-          border-radius: $r-xs;
-        }
-      }
-    }
-  }
-
-  .inbox-tab-text {
-    font-size: var(--tk-font-cap);
-    color: $tx2;
-  }
-}
-
 .inbox-list {
   height: calc(100vh - 50px);
   padding: 12px;
@@ -103,16 +65,6 @@
   }
 }
 
-.inbox-empty {
-  text-align: center;
-  padding: 80px 0;
-
-  .inbox-empty-text {
-    font-size: var(--tk-font-cap);
-    color: $tx3;
-  }
-}
-
 .half-screen-dialog {
   position: fixed;
   bottom: 0;
diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx
index 9348f42..d52927b 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/action-inbox/index.tsx
@@ -11,6 +11,7 @@ import {
 } from '@/services/action-inbox';
 import Loading from '@/components/Loading';
 import ErrorState from '@/components/ErrorState';
+import EmptyState from '@/components/EmptyState';
 import SegmentTabs from '@/components/SegmentTabs';
 import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
@@ -124,9 +125,7 @@ export default function ActionInboxPage() {
       {error ? (
         <ErrorState onRetry={() => fetchItems(1, activeTab, true)} />
       ) : items.length === 0 && !loading ? (
-        <View className="inbox-empty">
-          <Text className="inbox-empty-text">暂无待办事项</Text>
-        </View>
+        <EmptyState text='暂无待办事项' />
       ) : (
         <ScrollView scrollY className="inbox-list">
           {items.map((item) => (
diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss b/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss
index 2d8a7dc..f459ae9 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/consultation/index.scss
@@ -6,38 +6,6 @@
   background: $bg;
 }
 
-.tabs {
-  display: flex;
-  background: $card;
-  padding: 0 16px;
-  border-bottom: 1px solid $bd;
-}
-
-.tab {
-  flex: 1;
-  text-align: center;
-  padding: 24px 0;
-  font-size: var(--tk-font-body-lg);
-  color: $tx2;
-  position: relative;
-
-  &--active {
-    color: $pri;
-    font-weight: 600;
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 30%;
-      right: 30%;
-      height: 4px;
-      background: $pri;
-      border-radius: $r-xs;
-    }
-  }
-}
-
 .session-list {
   padding: 20px 24px;
   display: flex;
diff --git a/apps/miniprogram/src/pages/pkg-doctor-core/followup/index.scss b/apps/miniprogram/src/pages/pkg-doctor-core/followup/index.scss
index e9fa5bd..fcf2323 100644
--- a/apps/miniprogram/src/pages/pkg-doctor-core/followup/index.scss
+++ b/apps/miniprogram/src/pages/pkg-doctor-core/followup/index.scss
@@ -6,40 +6,6 @@
   background: $bg;
 }
 
-.tabs {
-  display: flex;
-  background: $card;
-  padding: 0 12px;
-  border-bottom: 1px solid $bd;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.tab {
-  display: inline-block;
-  padding: 24px 16px;
-  font-size: var(--tk-font-h1);
-  color: $tx2;
-  position: relative;
-  flex-shrink: 0;
-
-  &--active {
-    color: $pri;
-    font-weight: 600;
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 20%;
-      right: 20%;
-      height: 4px;
-      background: $pri;
-      border-radius: $r-xs;
-    }
-  }
-}
-
 .task-count {
   padding: 20px 28px;
 
diff --git a/apps/miniprogram/src/pages/pkg-health/alerts/index.scss b/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
index e1f930b..2c25cbe 100644
--- a/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/alerts/index.scss
@@ -105,34 +105,3 @@
   color: $tx;
   line-height: 1.5;
 }
-
-.alerts-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 120px 0;
-}
-
-.alerts-empty-text {
-  font-size: var(--tk-font-num);
-  color: var(--tk-text-secondary);
-  margin-bottom: 16px;
-}
-
-.alerts-empty-hint {
-  font-size: var(--tk-font-h1);
-  color: var(--tk-text-secondary);
-}
-
-.alerts-empty-action {
-  margin-top: 24px;
-  padding: 16px 48px;
-  background: $pri;
-  border-radius: $r-pill;
-}
-
-.alerts-empty-action-text {
-  color: $card;
-  font-size: var(--tk-font-body-lg);
-}
diff --git a/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx b/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx
index d1f1233..fc91648 100644
--- a/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-health/alerts/index.tsx
@@ -6,6 +6,7 @@ import { listPatientAlerts, type Alert } from '@/services/alert';
 import { useAuthStore } from '@/stores/auth';
 import Loading from '@/components/Loading';
 import ErrorState from '@/components/ErrorState';
+import EmptyState from '@/components/EmptyState';
 import SegmentTabs from '@/components/SegmentTabs';
 import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';
@@ -98,7 +99,7 @@ export default function PatientAlerts() {
       <SegmentTabs tabs={STATUS_TABS} activeKey={status} onChange={handleTabChange} variant="pill" />
 
       {alerts.length === 0 && !loading ? (
-        <ErrorState text='暂无告警记录' hint='您的各项指标正常' />
+        <EmptyState text='暂无告警记录' hint='您的各项指标正常' />
       ) : (
         <View className='alerts-list'>
           {alerts.map((item) => {
diff --git a/apps/miniprogram/src/pages/pkg-health/trend/index.scss b/apps/miniprogram/src/pages/pkg-health/trend/index.scss
index bceb74f..7a06a18 100644
--- a/apps/miniprogram/src/pages/pkg-health/trend/index.scss
+++ b/apps/miniprogram/src/pages/pkg-health/trend/index.scss
@@ -45,29 +45,6 @@
   padding: 0 32px 28px;
 }
 
-.trange-tab {
-  padding: 12px 32px;
-  border-radius: $r-pill;
-  background: $card;
-  box-shadow: $shadow-sm;
-  transition: all 0.2s;
-}
-
-.trange-tab-active {
-  background: $pri;
-  box-shadow: $shadow-md;
-}
-
-.trange-tab-text {
-  font-size: var(--tk-font-h2);
-  color: $tx2;
-  font-weight: 500;
-}
-
-.trange-tab-text-active {
-  color: $white;
-}
-
 /* ── chart card ── */
 .trend-chart-card {
   margin: 0 24px 20px;
diff --git a/apps/miniprogram/src/pages/pkg-mall/orders/index.scss b/apps/miniprogram/src/pages/pkg-mall/orders/index.scss
index e8c767c..07a588b 100644
--- a/apps/miniprogram/src/pages/pkg-mall/orders/index.scss
+++ b/apps/miniprogram/src/pages/pkg-mall/orders/index.scss
@@ -7,45 +7,6 @@
   padding-bottom: 40px;
 }
 
-/* ===== 状态筛选标签 ===== */
-.status-tabs {
-  display: flex;
-  gap: 0;
-  padding: 20px 24px 0;
-  background: $card;
-  margin-bottom: 16px;
-  border-radius: 0 0 $r-lg $r-lg;
-}
-
-.status-tab {
-  flex: 1;
-  @include flex-center;
-  padding: 16px 0;
-  position: relative;
-
-  &.active::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 40px;
-    height: 4px;
-    background: $pri;
-    border-radius: $r-xs;
-  }
-}
-
-.status-tab-text {
-  font-size: var(--tk-font-body-lg);
-  color: $tx3;
-
-  .status-tab.active & {
-    color: $pri;
-    font-weight: bold;
-  }
-}
-
 /* ===== 订单列表 ===== */
 .order-list {
   padding: 0 24px;
diff --git a/apps/miniprogram/src/styles/elder-mode.scss b/apps/miniprogram/src/styles/elder-mode.scss
index 260fc00..9f9ef3e 100644
--- a/apps/miniprogram/src/styles/elder-mode.scss
+++ b/apps/miniprogram/src/styles/elder-mode.scss
@@ -124,9 +124,4 @@
   .guest-login-btn {
     height: 64px;
   }
-
-  // ─── 积分商城空状态 ───
-  .mall-empty-state {
-    padding: 100px 40px;
-  }
 }