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

商城订单/积分兑换/积分明细、AI 报告列表、预约列表、
文章详情共 6 个页面迁移：
- 最外层容器 → PageShell
- SCSS 删除 min-height/background 通用样式

apps/miniprogram/src/pages/ai-report/list/index.scss

@@ -1,12 +1,7 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.ai-report-page {
+// PageShell 已接管：min-height, background, padding
-  min-height: 100vh;
-  background: $bg;
-  padding: 24px;
-  padding-bottom: 40px;
-}
 
 .page-title {
   @include section-title;

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>
   );
 }

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;
 }
 

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>
   );
 }

apps/miniprogram/src/pages/article/detail/index.scss

@@ -1,11 +1,7 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.article-detail-page {
+// PageShell 已接管：min-height, background, padding
-  min-height: 100vh;
-  background: $bg;
-  padding-bottom: 40px;
-}
 
 .article-header {
   background: $card;

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>
   );
 }

apps/miniprogram/src/pages/pkg-mall/detail/index.scss

@@ -1,11 +1,7 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.detail-page {
+// PageShell 已接管：min-height, background, padding
-  min-height: 100vh;
-  background: $bg;
-  padding-bottom: 40px;
-}
 
 /* ===== 余额卡片 ===== */
 .balance-card {

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>
   );
 }

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;
 }
 

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>
   );
 }

apps/miniprogram/src/pages/pkg-mall/orders/index.scss

@@ -1,11 +1,8 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-.orders-page {
+// PageShell 已接管：min-height, background, safe-bottom
-  min-height: 100vh;
+// ContentCard 已接管：order-card 背景/圆角/阴影
-  background: $bg;
-  padding-bottom: 40px;
-}
 
 /* ===== 订单列表 ===== */
 .order-list {
@@ -13,11 +10,8 @@
 }
 
 .order-card {
-  background: $card;
-  border-radius: $r;
   margin-bottom: 16px;
   overflow: hidden;
-  box-shadow: $shadow-sm;
 }
 
 .order-header {

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>
   );
 }