OPC-Hub/training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(content): C端正文富文本渲染(HTML)

Browse Source 
- 小程序 content-detail：<RichText nodes=body> 渲染 HTML(图片/视频/排版)，样式对齐
- 网站 Content.jsx 详情展开：dangerouslySetInnerHTML 渲染富文本

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Pine
2026-08-27 15:01:05 +08:00
parent ef28c6127a
commit e6152cb932
3 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/src/pages/content-detail/index.jsx
+4 -2
View File
@@ -1,4 +1,4 @@
import { View, Text, Image, Video, ScrollView, Button } from '@tarojs/components'; import { View, Text, Image, Video, ScrollView, Button, RichText } from '@tarojs/components';
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { getContent } from '@/utils/content'; import { getContent } from '@/utils/content';
@@ -45,7 +45,9 @@ export default function ContentDetail() {
</View> </View>
{item.summary ? <Text className="cd-summary">{item.summary}</Text> : null} {item.summary ? <Text className="cd-summary">{item.summary}</Text> : null}
<Text className="cd-body">{item.body || '暂无正文'}</Text> {item.body
? <RichText className="cd-body" nodes={item.body} />
: <Text className="cd-body">暂无正文</Text>}
{/* 图集 */} {/* 图集 */}
{images.length > 0 && ( {images.length > 0 && (
miniprogram/src/pages/content-detail/index.scss
+3 -1
View File
@@ -9,7 +9,9 @@
.cd-dot { font-size: 24rpx; color: #6d6d72; } .cd-dot { font-size: 24rpx; color: #6d6d72; }
.cd-meta-at { font-size: 24rpx; color: #7c7c80; } .cd-meta-at { font-size: 24rpx; color: #7c7c80; }
.cd-summary { display: block; margin: 20rpx 28rpx 0; font-size: 27rpx; color: #c4c2c3; line-height: 1.7; } .cd-summary { display: block; margin: 20rpx 28rpx 0; font-size: 27rpx; color: #c4c2c3; line-height: 1.7; }
.cd-body { display: block; margin: 20rpx 28rpx 0; font-size: 28rpx; color: #e4e4e6; line-height: 1.8; white-space: pre-wrap; } .cd-body { display: block; margin: 20rpx 28rpx 0; font-size: 28rpx; color: #e4e4e6; line-height: 1.8; }
.cd-body img, .cd-body video { max-width: 100%; border-radius: 14rpx; }
.cd-body p { margin: 0 0 8rpx; }
.cd-gallery { display: flex; gap: 12rpx; margin: 24rpx 28rpx 0; white-space: nowrap; } .cd-gallery { display: flex; gap: 12rpx; margin: 24rpx 28rpx 0; white-space: nowrap; }
.cd-gal-img { width: 240rpx; height: 240rpx; border-radius: 14rpx; flex-shrink: 0; margin-right: 12rpx; } .cd-gal-img { width: 240rpx; height: 240rpx; border-radius: 14rpx; flex-shrink: 0; margin-right: 12rpx; }
.cd-link { margin: 28rpx 28rpx 0; } .cd-link { margin: 28rpx 28rpx 0; }
website/src/user/Content.jsx
+1 -1
View File
@@ -69,7 +69,7 @@ function NewsCard({ it, big, open, onToggle }) {
{open && ( {open && (
<div style={{ padding: '0 16px 16px' }}> <div style={{ padding: '0 16px 16px' }}>
{it.summary && <p className="pf-muted">{it.summary}</p>} {it.summary && <p className="pf-muted">{it.summary}</p>}
<p className="pf-body" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.8 }}>{it.body || '暂无正文'}</p> <div className="pf-body ct-rich" style={{ lineHeight: 1.8 }} dangerouslySetInnerHTML={{ __html: it.body || '暂无正文' }} />
{Array.isArray(it.images) && it.images.length > 0 && ( {Array.isArray(it.images) && it.images.length > 0 && (
<div style={{ display: 'flex', gap: 8, overflowX: 'auto', marginTop: 10 }}> <div style={{ display: 'flex', gap: 8, overflowX: 'auto', marginTop: 10 }}>
{it.images.map((u, i) => <img key={i} src={u} alt="" style={{ width: 120, height: 120, borderRadius: 8, objectFit: 'cover', flexShrink: 0 }} />)} {it.images.map((u, i) => <img key={i} src={u} alt="" style={{ width: 120, height: 120, borderRadius: 8, objectFit: 'cover', flexShrink: 0 }} />)}