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

- 引入 mp-html 替代 RichText,支持图文混排、表格等复杂内容
- 新建 RichArticle 组件封装 sanitizeHtml + mp-html
- 通过 native-components 拷贝原生组件到 dist
- 优化文章排版样式(字号、间距、分隔线、底栏安全区)
- sanitize-html 扩展允许 style/data-w-e-type 属性
This commit is contained in:
iven
2026-05-25 13:44:00 +08:00
parent a24c18155f
commit 185f411495
17 changed files with 162 additions and 34 deletions

View File

@@ -1,13 +1,13 @@
import { useState, useCallback } from 'react';
import { View, Text, RichText } from '@tarojs/components';
import { View, Text } from '@tarojs/components';
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro';
import { usePageData } from '@/hooks/usePageData';
import { getArticleDetail, getPublicArticleDetail, Article } from '../../../services/article';
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 RichArticle from '@/components/RichArticle';
import './index.scss';
export default function ArticleDetail() {
@@ -77,14 +77,24 @@ export default function ArticleDetail() {
<Text className='article-title'>{article.title}</Text>
<View className='article-meta'>
{article.author && <Text>{article.author}</Text>}
{article.published_at && <Text>{article.published_at.slice(0, 10)}</Text>}
{article.author && (
<View className='meta-item'>
<Text className='meta-icon'></Text>
<Text>{article.author}</Text>
</View>
)}
{article.published_at && (
<View className='meta-item'>
<Text className='meta-icon'>📅</Text>
<Text>{article.published_at.slice(0, 10)}</Text>
</View>
)}
</View>
<View className='article-divider' />
<View className='article-body'>
<RichText nodes={sanitizeHtml(article.content || '')} />
<RichArticle html={article.content || ''} />
</View>
<View className='article-bottom-bar'>