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:
@@ -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'>
|
||||
|
||||
Reference in New Issue
Block a user