hookehuyr

feat(message): 优化消息列表与详情页展示

### 消息列表页
- 优化消息项卡片布局,提升信息可读性
- 添加未读红点显示
- 改进标题和状态标签的视觉层级

### 消息详情页
- 添加富文本内容格式化功能
- 处理图片宽度自适应
- 处理文本换行显示

详细变更:
- src/pages/message/index.vue: 优化卡片布局和状态显示
- src/pages/message-detail/index.vue: 新增格式化功能
......@@ -173,13 +173,16 @@ const getProposalStatusText = (status) => {
}
/**
* 格式化富文本内容,处理图片宽度等问题
* 格式化富文本内容,处理图片宽度、文本换行等问题
*/
const formattedContent = computed(() => {
if (!detail.value?.note) return ''
// 简单的正则替换,确保图片宽度不超过容器
const content = detail.value.note.replace(
// 1. 处理文本换行:将真正的换行符替换为 <br> 标签
let content = detail.value.note.replace(/\n/g, '<br>')
// 2. 处理图片样式:确保图片宽度不超过容器
content = content.replace(
/<img/g,
'<img style="max-width:100%;height:auto;display:block;border-radius:8px;margin:10px 0;"'
)
......
......@@ -29,17 +29,19 @@
@tap="handleItemClick(item)"
>
<!-- 顶部:标题与红点 -->
<view class="flex justify-between items-start mb-2">
<view class="flex-1 mr-2 relative">
<view class="mb-2">
<view class="flex-1 relative">
<!-- 未读红点 -->
<view v-if="item.status === 'send'" class="absolute -left-2 top-1.5 w-1.5 h-1.5 bg-red-500 rounded-full"></view>
<!-- 标题:使用 API 返回的 title -->
<text class="text-lg font-bold text-gray-900 leading-snug">
<text class="text-base font-bold text-gray-900 leading-snug text-justify">
{{ item.title || '暂无标题' }}
</text>
</view>
</view>
<!-- 状态标签 -->
<!-- 状态标签行:靠右对齐 -->
<view class="flex justify-end mb-2">
<view v-if="item.status === 'send'" class="shrink-0 px-2 py-1 bg-red-50 text-red-600 rounded text-xs font-medium border border-red-100">
未读
</view>
......@@ -50,7 +52,7 @@
<!-- 中间:内容预览 -->
<view class="mb-4">
<text class="text-sm text-gray-500 leading-relaxed">
<text class="text-xs text-gray-500 leading-relaxed">
{{ item.note ? '点击查看详情' : '暂无内容' }}
</text>
</view>
......