refactor(mp): 迁移剩余 8 特殊页面到统一组件库

- 首页/健康/我的/商城/消息 TabBar 页面使用 PageShell 替代手写容器 - 登录/法律条款/关怀模式设置页使用 PageShell 替代手写容器 - 各页面卡片统一使用 ContentCard 组件 - 清理页面 SCSS 中的 min-height/background/padding 样板代码 - 66 个小程序页面全部完成统一组件迁移
2026-05-16 01:55:28 +08:00
parent c6bffd4019
commit 184bd0ea03
17 changed files with 109 additions and 179 deletions
--- a/apps/miniprogram/src/pages/index/index.scss
+++ b/apps/miniprogram/src/pages/index/index.scss
@@ -6,9 +6,6 @@
   ═══════════════════════════════════════ */

 .home-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 20px 24px 100px;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
 }

@@ -69,10 +66,6 @@

 /* ─── 今日体征进度 ─── */
 .checkin-card {
-  background: $card;
-  border-radius: $r;
-  box-shadow: $shadow-md;
-  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
@@ -140,11 +133,6 @@
 }

 .vital-card {
-  background: $card;
-  border-radius: $r;
-  padding: 14px 16px;
-  box-shadow: $shadow-sm;
-
  &:active {
    opacity: 0.7;
  }
@@ -314,8 +302,6 @@
   ═══════════════════════════════════════ */

 .guest-page {
-  min-height: 100vh;
-  background: $bg;
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
 }

@@ -393,10 +379,7 @@
 }

 .guest-article-card {
-  background: $card;
-  border-radius: $r;
  overflow: hidden;
-  box-shadow: $shadow-sm;
  display: flex;

  &:active {
@@ -449,10 +432,6 @@
 /* ─── 底部登录引导 ─── */
 .guest-login-prompt {
  margin: 24px 24px 0;
-  background: $card;
-  border-radius: $r;
-  padding: 20px;
-  box-shadow: $shadow-md;
  display: flex;
  align-items: center;
  gap: 16px;
--- a/apps/miniprogram/src/pages/index/index.tsx
+++ b/apps/miniprogram/src/pages/index/index.tsx
@@ -10,6 +10,8 @@ import { api } from '@/services/request';
 import type { Article } from '@/services/article';
 import ProgressRing from '../../components/ProgressRing';
 import Loading from '../../components/Loading';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useHomeData, type ReminderItem } from './useHomeData';
 import './index.scss';

@@ -83,7 +85,7 @@ function GuestHome({ modeClass }: { modeClass: string }) {
  const slides = banners.length > 0 ? banners : FALLBACK_SLIDES;

  return (
-    <View className={`guest-page ${modeClass}`}>
+    <PageShell padding="none" safeBottom={false} scroll={false} className={`guest-page ${modeClass}`}>
      <Swiper
        className='guest-swiper'
        indicatorDots
@@ -116,10 +118,11 @@ function GuestHome({ modeClass }: { modeClass: string }) {
        {articles.length > 0 ? (
          <View className='guest-articles'>
            {articles.map((article) => (
-              <View
-                className='guest-article-card'
+              <ContentCard
                key={article.id}
-                onClick={() => Taro.navigateTo({ url: `/pages/article/detail/index?id=${article.id}` })}
+                onPress={() => Taro.navigateTo({ url: `/pages/article/detail/index?id=${article.id}` })}
+                activeFeedback="opacity"
+                padding="none"
              >
                {article.cover_image && (
                  <Image className='guest-article-cover' src={article.cover_image} mode='aspectFill' />
@@ -130,34 +133,40 @@ function GuestHome({ modeClass }: { modeClass: string }) {
                    {article.summary || '点击查看详情'}
                  </Text>
                </View>
-              </View>
+              </ContentCard>
            ))}
          </View>
        ) : (
          <View className='guest-articles'>
-            <View className='guest-article-card'>
-              <Text className='guest-article-title'>健康数据管理</Text>
-              <Text className='guest-article-summary'>记录并追踪您的体征数据</Text>
-            </View>
-            <View className='guest-article-card'>
-              <Text className='guest-article-title'>智能预约排班</Text>
-              <Text className='guest-article-summary'>在线预约透析和治疗</Text>
-            </View>
-            <View className='guest-article-card'>
-              <Text className='guest-article-title'>AI 健康分析</Text>
-              <Text className='guest-article-summary'>个性化健康趋势解读</Text>
-            </View>
+            <ContentCard padding="none">
+              <View className='guest-article-body'>
+                <Text className='guest-article-title'>健康数据管理</Text>
+                <Text className='guest-article-summary'>记录并追踪您的体征数据</Text>
+              </View>
+            </ContentCard>
+            <ContentCard padding="none">
+              <View className='guest-article-body'>
+                <Text className='guest-article-title'>智能预约排班</Text>
+                <Text className='guest-article-summary'>在线预约透析和治疗</Text>
+              </View>
+            </ContentCard>
+            <ContentCard padding="none">
+              <View className='guest-article-body'>
+                <Text className='guest-article-title'>AI 健康分析</Text>
+                <Text className='guest-article-summary'>个性化健康趋势解读</Text>
+              </View>
+            </ContentCard>
          </View>
        )}
      </View>

-      <View className='guest-login-prompt'>
+      <ContentCard variant="elevated">
        <Text className='guest-login-text'>登录后即可使用完整健康管理服务</Text>
        <View className='guest-login-btn' onClick={navigateToLogin}>
          <Text className='guest-login-btn-text'>立即登录</Text>
        </View>
-      </View>
-    </View>
+      </ContentCard>
+    </PageShell>
  );
 }

@@ -177,7 +186,7 @@ function HomeDashboard({ modeClass }: { modeClass: string }) {
  };

  return (
-    <View className={`home-page ${modeClass}`}>
+    <PageShell padding="md" safeBottom={false} scroll={false} className={`home-page ${modeClass}`}>
      <View className='greeting-section'>
        <View className='greeting-left'>
          <Text className='greeting-text'>{greeting}，{displayName}</Text>
@@ -191,7 +200,7 @@ function HomeDashboard({ modeClass }: { modeClass: string }) {
        </View>
      </View>

-      <View className='checkin-card' onClick={() => Taro.switchTab({ url: '/pages/health/index' })}>
+      <ContentCard variant="elevated" onPress={() => Taro.switchTab({ url: '/pages/health/index' })}>
        <View className='checkin-left'>
          <ProgressRing percent={progressPercent} />
        </View>
@@ -207,7 +216,7 @@ function HomeDashboard({ modeClass }: { modeClass: string }) {
            ))}
          </View>
        </View>
-      </View>
+      </ContentCard>

      <View className='vitals-section'>
        <Text className='section-title'>今日体征</Text>
@@ -218,10 +227,10 @@ function HomeDashboard({ modeClass }: { modeClass: string }) {
            {healthItems.map((item) => {
              const tag = getStatusTag(item.status);
              return (
-                <View
-                  className='vital-card'
+                <ContentCard
                  key={item.label}
-                  onClick={() => Taro.navigateTo({ url: `/pages/pkg-health/trend/index?indicator=${item.indicator}` })}
+                  onPress={() => Taro.navigateTo({ url: `/pages/pkg-health/trend/index?indicator=${item.indicator}` })}
+                  activeFeedback="opacity"
                >
                  <Text className='vital-label'>{item.label}</Text>
                  <View className='vital-value-row'>
@@ -232,7 +241,7 @@ function HomeDashboard({ modeClass }: { modeClass: string }) {
                    {tag && <Text className={`vital-tag ${tag.cls}`}>{tag.label}</Text>}
                    {!item.status && <Text className='vital-tag tag-empty'>未记录</Text>}
                  </View>
-                </View>
+                </ContentCard>
              );
            })}
          </View>
@@ -270,7 +279,7 @@ function HomeDashboard({ modeClass }: { modeClass: string }) {
          <Text className='action-btn-text'>预约挂号</Text>
        </View>
      </View>
-    </View>
+    </PageShell>
  );
 }