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

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

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

详细变更：
- src/pages/message/index.vue: 优化卡片布局和状态显示
- src/pages/message-detail/index.vue: 新增格式化功能

@@ -173,13 +173,16 @@ const getProposalStatusText = (status) => {
 }
 }
 
 
 /**
 /**
- * 格式化富文本内容，处理图片宽度等问题
+ * 格式化富文本内容，处理图片宽度、文本换行等问题
  */
  */
 const formattedContent = computed(() => {
 const formattedContent = computed(() => {
   if (!detail.value?.note) return ''
   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/g,
     '<img style="max-width:100%;height:auto;display:block;border-radius:8px;margin:10px 0;"'
     '<img style="max-width:100%;height:auto;display:block;border-radius:8px;margin:10px 0;"'
   )
   )

@@ -29,17 +29,19 @@
         @tap="handleItemClick(item)"
         @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>
             <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 -->
             <!-- 标题：使用 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 || '暂无标题' }}
               {{ item.title || '暂无标题' }}
             </text>
             </text>
           </view>
           </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 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>
           </view>
@@ -50,7 +52,7 @@
 
 
         <!-- 中间：内容预览 -->
         <!-- 中间：内容预览 -->
         <view class="mb-4">
         <view class="mb-4">
-          <text class="text-sm text-gray-500 leading-relaxed">
+          <text class="text-xs text-gray-500 leading-relaxed">
             {{ item.note ? '点击查看详情' : '暂无内容' }}
             {{ item.note ? '点击查看详情' : '暂无内容' }}
           </text>
           </text>
         </view>
         </view>