完成AI问答模块

This commit is contained in:
2025-07-08 21:42:38 +08:00
parent 38f67616fc
commit 9f8f113e43
35 changed files with 1563 additions and 146 deletions

View File

@@ -0,0 +1,91 @@
# Taro RichText 富文本组件使用指南
## 基本用法
```tsx
import { RichText } from '@tarojs/components';
// 显示HTML字符串
<RichText
nodes={htmlString}
space="nbsp"
/>
```
## 主要属性
### nodes
- **类型**: `string | Array<Node>`
- **说明**: 富文本内容支持HTML字符串或节点数组
### space
- **类型**: `'ensp' | 'emsp' | 'nbsp'`
- **说明**: 显示连续空格的方式
- `ensp`: 中文字符空格一半大小
- `emsp`: 中文字符空格大小
- `nbsp`: 根据字体设置的空格大小
### selectable
- **类型**: `boolean`
- **默认值**: `false`
- **说明**: 富文本是否可以长按选中
## HTML内容处理
### 支持的HTML标签
- 文本标签: `p`, `span`, `div`, `h1-h6`, `strong`, `b`, `em`, `i`
- 列表标签: `ul`, `ol`, `li`
- 其他标签: `img`, `a`, `br`, `hr`
### 样式处理
富文本内容的样式通过CSS全局样式定义
```scss
.content {
:global {
p { margin: 16px 0; }
img { max-width: 100%; }
// 更多样式...
}
}
```
## 实际应用示例
### 文章详情页面
```tsx
<View className={'content text-gray-700 text-sm'}>
<RichText
nodes={item?.content || ''}
space="nbsp"
/>
</View>
```
### 协议页面
```tsx
<View className={'content text-gray-700 text-sm p-4'}>
<RichText nodes={content}/>
</View>
```
## 注意事项
1. **安全性**: RichText会直接渲染HTML注意防范XSS攻击
2. **性能**: 大量富文本内容可能影响性能
3. **兼容性**: 不同平台对HTML标签支持程度不同
4. **样式**: 使用`:global`确保样式能正确应用到富文本内容
## 常见问题
### 图片不显示
- 检查图片URL是否正确
- 确保图片域名在小程序白名单中
### 样式不生效
- 使用`:global`包裹富文本样式
- 检查CSS选择器优先级
### 内容被截断
- 检查容器高度设置
- 使用`max-width: 100%`防止内容溢出