hookehuyr

docs(components): 更新组件文档和 CHANGELOG

- 修正 RichTextRenderer.vue 注释说明(scoped 样式相关)
- 更新 components/README.md,添加 RichTextRenderer 组件文档
- 更新 CHANGELOG.md,记录今日计划书表单调整

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
# CHANGELOG
## [2026-02-28] - 储蓄类计划书表单调整
### 优化
- 移除储蓄类产品的"吸烟"字段(客户需求)
- 切断年龄与出生日期的自动联动,改为独立填写(客户需求)
- 更新储蓄类提交字段映射,移除吸烟字段
### 文档
- 更新 components/README.md,添加 RichTextRenderer 组件文档
- 修正 RichTextRenderer.vue 的注释说明
---
## [2026-02-27] - 文章详情富文本样式优化
### 修复
......
......@@ -15,7 +15,8 @@ components/
├── icons/ # 图标组件
├── list/ # 列表组件
├── navigation/ # 导航组件
└── plan/ # 计划书组件
├── plan/ # 计划书组件
└── RichTextRenderer.vue # 富文本渲染组件
```
---
......@@ -143,6 +144,32 @@ import LoadMoreList from '@/components/list/LoadMoreList/index.vue'
---
### 富文本组件
| 组件 | 功能 | Props |
|------|------|-------|
| [`RichTextRenderer`](#richtextrenderervue) | 富文本渲染 | content, enableTransform |
**使用示例**
```vue
<template>
<RichTextRenderer
:content="htmlContent"
:enable-transform="true"
@image-preview="handlePreview"
@file-click="handleFileClick"
/>
</template>
<script setup>
import RichTextRenderer from '@/components/RichTextRenderer.vue'
const htmlContent = '<p>HTML 内容</p>'
</script>
```
---
### 计划书组件 (plan/)
#### 弹窗容器
......@@ -365,6 +392,55 @@ IconFont 图标组件。
---
### RichTextRenderer.vue
富文本渲染组件,基于 Taro v-html 实现。
**Props**
| Prop | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| content | String | '' | HTML 内容字符串 |
| enableTransform | Boolean | true | 是否启用图片自动处理 |
**Events**
| Event | 说明 | 参数 |
|-------|------|------|
| image-preview | 图片预览时触发 | { src } |
| file-click | 文件链接点击时触发 | { url, fileName } |
**功能特性**
- HTML 实体自动解码
- `<a>` 标签自动替换为 `<div data-href="">`
- 图片长按预览
- 文件链接点击处理
- 自动处理图片样式(widthFix, max-width: 100%)
**使用示例**
```vue
<template>
<RichTextRenderer
:content="article.content"
:enable-transform="true"
@image-preview="handlePreview"
@file-click="handleFileClick"
/>
</template>
<script setup>
import RichTextRenderer from '@/components/RichTextRenderer.vue'
const handlePreview = ({ src }) => {
console.log('预览图片:', src)
}
const handleFileClick = ({ url, fileName }) => {
console.log('打开文件:', fileName, url)
}
</script>
```
---
## 📖 最佳实践
### 组件抽取原则
......
......@@ -26,7 +26,8 @@ import { ref, watch, nextTick } from 'vue'
import Taro from '@tarojs/taro'
import { $ } from '@tarojs/extend'
import { useFileOperation } from '@/composables/useFileOperation'
// 注意:不再导入全局的 @tarojs/taro/html.css,改用 scoped 样式
// 注意:不再导入全局的 @tarojs/taro/html.css
// 改为在组件内部内联完整的 html.css 样式,通过 #rich-text-renderer ID 选择器限制作用范围
/**
* 组件属性
......