feat(mp): 文章详情页改用 mp-html 原生富文本组件

- 引入 mp-html 替代 RichText，支持图文混排、表格等复杂内容
- 新建 RichArticle 组件封装 sanitizeHtml + mp-html
- 通过 native-components 拷贝原生组件到 dist
- 优化文章排版样式（字号、间距、分隔线、底栏安全区）
- sanitize-html 扩展允许 style/data-w-e-type 属性

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

@@ -1,19 +1,21 @@
 @import '../../../styles/variables.scss';
 
-// 文章详情页 — 对齐原型 docs/design/mp-04-article-report.html → ArticleDetail
+// 文章详情页 — 阅读优化排版
 
 .article-detail-page {
-  padding-bottom: 80px;
+  padding-bottom: 100px;
+  background: $card;
 }
 
 .article-title {
   font-family: Georgia, 'Times New Roman', serif;
-  font-size: var(--tk-font-h2);
+  font-size: var(--tk-font-h1);
   font-weight: 700;
   color: $tx;
   display: block;
-  line-height: 1.4;
-  margin-bottom: var(--tk-gap-sm);
+  line-height: 1.35;
+  margin-bottom: var(--tk-gap-md);
+  letter-spacing: 0.5px;
 }
 
 .article-meta {
@@ -21,36 +23,38 @@
   gap: var(--tk-gap-md);
   font-size: var(--tk-font-cap);
   color: $tx3;
-  margin-bottom: var(--tk-gap-md);
+  margin-bottom: var(--tk-gap-lg);
+  align-items: center;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-icon {
+  font-size: 13px;
+  line-height: 1;
 }
 
 .article-divider {
   height: 1px;
-  background: $bd-l;
+  background: linear-gradient(90deg, $bd-l, $bd, $bd-l);
   margin-bottom: var(--tk-section-gap);
 }
 
 .article-body {
-  font-size: 15px;
+  // RichText 内部样式由 formatArticleHtml 内联注入
+  // 这里只控制容器间距
+  font-size: var(--tk-font-body);
   color: $tx2;
   line-height: 1.8;
 
-  // RichText 内部样式
-  h1, h2, h3 {
-    font-weight: bold;
+  // 兜底：万一内联样式未生效的标签
+  h1, h2, h3, h4, h5, h6 {
     color: $tx;
-    margin: var(--tk-gap-lg) 0 var(--tk-gap-sm);
-  }
-
-  p {
-    margin-bottom: var(--tk-gap-md);
-    text-indent: 2em;
-  }
-
-  img {
-    max-width: 100%;
-    border-radius: $r-sm;
-    margin: var(--tk-gap-sm) 0;
+    line-height: 1.4;
   }
 }
 
@@ -59,31 +63,40 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 60px;
+  height: 64px;
   background: $card;
   border-top: 1px solid $bd-l;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 32px;
+  gap: 48px;
   padding: 0 var(--tk-page-padding);
   z-index: 10;
+  // 安全区适配
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: 0 -2px 12px rgba(45, 42, 38, 0.06);
 }
 
 .article-action-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
+  gap: 4px;
+  min-width: $touch-min;
+  min-height: $touch-min;
+  justify-content: center;
+  border-radius: $r-sm;
+  transition: background var(--tk-duration-fast);
 
   &:active {
+    background: $surface-alt;
     opacity: var(--tk-touch-feedback-opacity);
   }
 }
 
 .article-action-icon {
-  font-size: 20px;
-  color: $tx3;
+  font-size: 22px;
+  color: $tx2;
   line-height: 1;
 }
 
@@ -105,3 +118,29 @@
   font-size: var(--tk-font-body);
   color: $tx3;
 }
+
+// ─── 关怀模式覆盖 ───
+.elder-mode {
+  .article-title {
+    font-size: var(--tk-font-h1);
+    line-height: 1.3;
+  }
+
+  .article-body {
+    font-size: var(--tk-font-body);
+    line-height: 2;
+  }
+
+  .article-bottom-bar {
+    height: 72px;
+    gap: 56px;
+  }
+
+  .article-action-icon {
+    font-size: 26px;
+  }
+
+  .article-action-text {
+    font-size: var(--tk-font-body-sm);
+  }
+}