fix(mp): 文章列表页对齐 mp-04 原型 — 分类Tab+卡片布局+字号

- 分类Tab: 选中态 pri 白字+阴影，未选中 surface-alt 圆角药丸
- 文章卡片: 80×80 缩略图+标题 16px serif+摘要 13px+元信息 12px
- ContentCard padding=sm margin=none，PageShell padding=none
- 缩略图 80×80（原型 80×80），封面 r-xs=8（原型 rXs=8）

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

@@ -1,31 +1,32 @@
 @import '../../styles/variables.scss';
 
-// PageShell 已接管：min-height, background, padding
+// 文章列表页 — 对齐原型 docs/design/mp-04-article-report.html → ArticleList
-// ContentCard 已接管：article-card 背景/圆角/阴影/触摸反馈
-// LoadingCard 已接管：初始加载骨架屏
-// EmptyState 已接管：空状态样式
 
-/* ─── 分类筛选滚动条（页面特有） ─── */
+/* ─── 分类筛选滚动条 ─── */
 .article-categories {
   white-space: nowrap;
-  margin-bottom: var(--tk-gap-lg);
+  padding: var(--tk-gap-sm) var(--tk-page-padding);
+  margin-bottom: var(--tk-gap-xs);
 }
 
 .article-cat-tab {
-  display: inline-block;
+  display: inline-flex;
-  padding: var(--tk-gap-sm) var(--tk-card-padding-lg);
+  align-items: center;
-  margin-right: var(--tk-gap-sm);
+  justify-content: center;
-  font-size: var(--tk-font-h1);
+  padding: 8px 18px;
+  margin-right: 8px;
+  font-size: var(--tk-font-body-sm);
+  font-weight: 400;
   color: $tx2;
-  background: $card;
+  background: $surface-alt;
-  border-radius: $r-lg;
+  border-radius: 20px;
-  border: 2px solid transparent;
+  transition: all 0.2s;
 
   &--active {
-    color: var(--tk-pri);
+    background: var(--tk-pri);
-    background: var(--tk-pri-l);
+    color: $white;
-    border-color: var(--tk-pri);
+    font-weight: 600;
-    font-weight: bold;
+    box-shadow: 0 2px 8px rgba(196, 98, 58, 0.2);
   }
 }
 
@@ -33,23 +34,31 @@
 .article-list {
   display: flex;
   flex-direction: column;
-  gap: var(--tk-section-gap);
+  gap: var(--tk-gap-sm);
+  padding: 0 var(--tk-page-padding) var(--tk-page-padding);
+
+  .content-card {
+    display: flex;
+    gap: 14px;
+  }
 }
 
-/* ─── 文章卡片内容（ContentCard 已接管外层卡片样式） ─── */
+/* ─── 文章卡片内容 ─── */
 .article-card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
-  margin-right: var(--tk-section-gap);
+  justify-content: space-between;
+  min-width: 0;
 }
 
 .article-card-title {
-  font-size: var(--tk-font-num);
+  font-family: Georgia, 'Times New Roman', serif;
-  font-weight: bold;
+  font-size: var(--tk-font-body);
+  font-weight: 700;
   color: $tx;
-  line-height: 1.4;
+  line-height: 1.35;
-  margin-bottom: var(--tk-gap-xs);
+  margin-bottom: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -58,11 +67,11 @@
 }
 
 .article-card-summary {
-  font-size: var(--tk-font-h1);
+  font-size: var(--tk-font-cap);
   color: $tx2;
   line-height: 1.4;
   display: block;
-  margin-bottom: var(--tk-gap-sm);
+  margin-bottom: var(--tk-gap-2xs);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -70,27 +79,28 @@
 
 .article-card-meta {
   display: flex;
-  align-items: center;
   gap: var(--tk-gap-sm);
+  font-size: var(--tk-font-micro);
+  color: $tx3;
 }
 
 .article-card-tag {
-  font-size: var(--tk-font-body);
+  font-size: var(--tk-font-micro);
   color: var(--tk-pri);
   background: var(--tk-pri-l);
-  padding: 2px var(--tk-gap-sm);
+  padding: 2px 8px;
-  border-radius: $r-sm;
+  border-radius: $r-xs;
 }
 
 .article-card-date {
-  font-size: var(--tk-font-body);
+  font-size: var(--tk-font-micro);
   color: $tx3;
 }
 
 .article-card-cover {
-  width: 180px;
+  width: 80px;
-  height: 120px;
+  height: 80px;
-  border-radius: $r-sm;
+  border-radius: $r-xs;
   overflow: hidden;
   flex-shrink: 0;
 }

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

@@ -81,7 +81,7 @@ export default function ArticleList() {
   }
 
   return (
-    <PageShell safeBottom className={modeClass}>
+    <PageShell safeBottom padding="none" className={modeClass}>
       {/* 分类筛选 */}
       {categories.length > 0 && (
         <ScrollView scrollX className='article-categories'>
@@ -112,6 +112,8 @@ export default function ArticleList() {
           {articles.map((a) => (
             <ContentCard
               key={a.id}
+              padding="sm"
+              margin="none"
               onPress={() => goToDetail(a.id)}
             >
               <View className='article-card-body'>