refactor(mp): 迁移商城+AI报告+预约列表+文章详情页 — 统一组件库

商城订单/积分兑换/积分明细、AI 报告列表、预约列表、文章详情共 6 个页面迁移： - 最外层容器 → PageShell - SCSS 删除 min-height/background 通用样式
2026-05-16 01:33:42 +08:00
parent 37327a4da4
commit 466b6567d1
12 changed files with 36 additions and 50 deletions
--- a/apps/miniprogram/src/pages/ai-report/list/index.scss
+++ b/apps/miniprogram/src/pages/ai-report/list/index.scss
@@ -1,12 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.ai-report-page {
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .page-title {
  @include section-title;
--- a/apps/miniprogram/src/pages/ai-report/list/index.tsx
+++ b/apps/miniprogram/src/pages/ai-report/list/index.tsx
@@ -6,6 +6,7 @@ import { listAiAnalysis, type AiAnalysisItem } from '@/services/ai-analysis';
 import Loading from '@/components/Loading';
 import EmptyState from '@/components/EmptyState';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const TYPE_LABELS: Record<string, string> = {
@@ -61,14 +62,14 @@ export default function AiReportList() {

  if (list.length === 0) {
    return (
-      <View className={`ai-report-page ${modeClass}`}>
+      <PageShell className={modeClass}>
        <EmptyState text='暂无 AI 分析报告' />
-      </View>
+      </PageShell>
    );
  }

  return (
-    <View className={`ai-report-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      <View className='page-title'>AI 分析报告</View>
      <ScrollView scrollY className='report-scroll' onScrollToLower={loadMore}>
        {list.map((item) => {
@@ -93,6 +94,6 @@ export default function AiReportList() {
        {loading && <Loading />}
        {!hasMore && list.length > 0 && <Text className='no-more'>没有更多了</Text>}
      </ScrollView>
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/appointment/index.scss
+++ b/apps/miniprogram/src/pages/appointment/index.scss
@@ -1,9 +1,8 @@
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

+// PageShell 已接管：min-height, background, padding
 .appointment-page {
-  min-height: 100vh;
-  background: $bg;
  padding-bottom: 160px;
 }

--- a/apps/miniprogram/src/pages/appointment/index.tsx
+++ b/apps/miniprogram/src/pages/appointment/index.tsx
@@ -7,6 +7,7 @@ import type { Appointment } from '../../services/appointment';
 import EmptyState from '../../components/EmptyState';
 import Loading from '../../components/Loading';
 import { useElderClass } from '../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const STATUS_MAP: Record<string, { label: string; className: string }> = {
@@ -80,7 +81,7 @@ export default function AppointmentList() {
  };

  return (
-    <View className={`appointment-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      {/* 页面标题 */}
      <View className='page-header'>
        <Text className='page-title'>预约挂号</Text>
@@ -146,6 +147,6 @@ export default function AppointmentList() {
      <View className='fab-btn' onClick={goCreate}>
        <Text className='fab-text'>新建预约</Text>
      </View>
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/article/detail/index.scss
+++ b/apps/miniprogram/src/pages/article/detail/index.scss
@@ -1,11 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.article-detail-page {
-  min-height: 100vh;
-  background: $bg;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 .article-header {
  background: $card;
--- a/apps/miniprogram/src/pages/article/detail/index.tsx
+++ b/apps/miniprogram/src/pages/article/detail/index.tsx
@@ -7,6 +7,7 @@ import { trackEvent } from '@/services/analytics';
 import { sanitizeHtml } from '@/utils/sanitize-html';
 import { useElderClass } from '../../../hooks/useElderClass';
 import { useAuthStore } from '../../../stores/auth';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 export default function ArticleDetail() {
@@ -44,26 +45,26 @@ export default function ArticleDetail() {

  if (loading) {
    return (
-      <View className={`article-detail-page ${modeClass}`}>
+      <PageShell className={modeClass}>
        <View className='loading-state'>
          <Text className='loading-text'>加载中...</Text>
        </View>
-      </View>
+      </PageShell>
    );
  }

  if (!article) {
    return (
-      <View className={`article-detail-page ${modeClass}`}>
+      <PageShell className={modeClass}>
        <View className='empty-state'>
          <Text className='empty-text'>文章不存在</Text>
        </View>
-      </View>
+      </PageShell>
    );
  }

  return (
-    <View className={`article-detail-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      {/* 文章头部 */}
      <View className='article-header'>
        <Text className='article-title'>{article.title}</Text>
@@ -93,6 +94,6 @@ export default function ArticleDetail() {
          nodes={sanitizeHtml(article.content || '')}
        />
      </View>
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-mall/detail/index.scss
+++ b/apps/miniprogram/src/pages/pkg-mall/detail/index.scss
@@ -1,11 +1,7 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.detail-page {
-  min-height: 100vh;
-  background: $bg;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, padding

 /* ===== 余额卡片 ===== */
 .balance-card {
--- a/apps/miniprogram/src/pages/pkg-mall/detail/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-mall/detail/index.tsx
@@ -8,6 +8,7 @@ import { usePointsStore } from '../../../stores/points';
 import EmptyState from '../../../components/EmptyState';
 import Loading from '../../../components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const TYPE_TABS = [
@@ -109,7 +110,7 @@ export default function PointsDetail() {
  const balance = account?.balance ?? 0;

  return (
-    <View className={`detail-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      {/* 余额卡片 */}
      <View className='balance-card'>
        <Text className='balance-label'>当前积分</Text>
@@ -177,6 +178,6 @@ export default function PointsDetail() {
          )}
        </View>
      )}
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-mall/exchange/index.scss
+++ b/apps/miniprogram/src/pages/pkg-mall/exchange/index.scss
@@ -1,9 +1,8 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

+// PageShell 已接管：min-height, background, padding
 .exchange-page {
-  min-height: 100vh;
-  background: $bg;
  padding-bottom: 140px;
 }

--- a/apps/miniprogram/src/pages/pkg-mall/exchange/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-mall/exchange/index.tsx
@@ -11,6 +11,7 @@ import { usePointsStore } from '../../../stores/points';
 import Loading from '../../../components/Loading';
 import { useElderClass } from '../../../hooks/useElderClass';
 import { useSafeTimeout } from '@/hooks/useSafeTimeout';
+import PageShell from '@/components/ui/PageShell';
 import './index.scss';

 const TYPE_INITIAL: Record<string, string> = {
@@ -128,9 +129,9 @@ export default function ExchangeConfirm() {

  if (loading) {
    return (
-      <View className={`exchange-page ${modeClass}`}>
+      <PageShell className={modeClass}>
        <Loading />
-      </View>
+      </PageShell>
    );
  }

@@ -140,7 +141,7 @@ export default function ExchangeConfirm() {
  const iconCls = TYPE_CLASS[productType] || 'product-icon-wrap--service';

  return (
-    <View className={`exchange-page ${modeClass}`}>
+    <PageShell className={modeClass}>
      {/* 商品预览卡片 */}
      <View className='product-card'>
        <View className={`product-icon-wrap ${iconCls}`}>
@@ -216,6 +217,6 @@ export default function ExchangeConfirm() {
          </Text>
        </View>
      </View>
-    </View>
+    </PageShell>
  );
 }
--- a/apps/miniprogram/src/pages/pkg-mall/orders/index.scss
+++ b/apps/miniprogram/src/pages/pkg-mall/orders/index.scss
@@ -1,11 +1,8 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

-.orders-page {
-  min-height: 100vh;
-  background: $bg;
-  padding-bottom: 40px;
-}
+// PageShell 已接管：min-height, background, safe-bottom
+// ContentCard 已接管：order-card 背景/圆角/阴影

 /* ===== 订单列表 ===== */
 .order-list {
@@ -13,11 +10,8 @@
 }

 .order-card {
-  background: $card;
-  border-radius: $r;
  margin-bottom: 16px;
  overflow: hidden;
-  box-shadow: $shadow-sm;
 }

 .order-header {
--- a/apps/miniprogram/src/pages/pkg-mall/orders/index.tsx
+++ b/apps/miniprogram/src/pages/pkg-mall/orders/index.tsx
@@ -8,6 +8,8 @@ import EmptyState from '../../../components/EmptyState';
 import ErrorState from '../../../components/ErrorState';
 import Loading from '../../../components/Loading';
 import SegmentTabs from '../../../components/SegmentTabs';
+import PageShell from '@/components/ui/PageShell';
+import ContentCard from '@/components/ui/ContentCard';
 import { useElderClass } from '../../../hooks/useElderClass';
 import './index.scss';

@@ -111,7 +113,7 @@ export default function MallOrders() {
  };

  return (
-    <View className={`orders-page ${modeClass}`}>
+    <PageShell padding="none" className={modeClass}>
      {/* 状态筛选标签 */}
      <SegmentTabs tabs={STATUS_TABS} activeKey={activeTab} onChange={handleTabChange} variant="underline" />

@@ -131,7 +133,7 @@ export default function MallOrders() {
          {orders.map((order) => {
            const statusCfg = getStatusConfig(order.status);
            return (
-              <View className='order-card' key={order.id}>
+              <ContentCard className='order-card' key={order.id}>
                <View className='order-header'>
                  <Text className='order-product'>商品 {order.product_id.slice(0, 8)}</Text>
                  <View
@@ -162,7 +164,7 @@ export default function MallOrders() {
                    </View>
                  )}
                </View>
-              </View>
+              </ContentCard>
            );
          })}
          {loading && <Loading />}
@@ -171,6 +173,6 @@ export default function MallOrders() {
          )}
        </View>
      )}
-    </View>
+    </PageShell>
  );
 }