hookehuyr

refactor(messages): 替换nut组件为原生view并优化布局样式

使用原生view组件替代nut-row和nut-col,简化布局结构
调整flex布局和间距样式,提升代码可维护性
......@@ -43,8 +43,8 @@
<view v-for="conversation in filteredConversations" :key="conversation.id"
class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2"
@click="onConversationClick(conversation)">
<nut-row>
<nut-col :span="6" class="avatar-container">
<view class="flex items-start">
<view class="avatar-container flex-shrink-0">
<view class="relative">
<image v-if="conversation.type === 'chat'" :src="conversation.avatar || defaultAvatar"
class="w-12 h-12 rounded-full object-cover" mode="aspectFill" />
......@@ -52,10 +52,10 @@
<component :is="conversation.icon" />
</view>
</view>
</nut-col>
<nut-col :span="20" class="content-container">
</view>
<view class="content-container flex-1 min-w-0">
<view class="flex justify-between items-center mb-1">
<text class="font-medium truncate flex-1 mr-2">{{ conversation.name }}</text>
<text class="font-medium flex-1 mr-2 truncate">{{ conversation.name }}</text>
<view class="flex items-center flex-shrink-0">
<text class="text-xs text-gray-500">{{ conversation.time }}</text>
<view v-if="conversation.unread" class="ml-1 bg-red-500 rounded-full w-2 h-2">
......@@ -63,8 +63,8 @@
</view>
</view>
<text class="text-sm text-gray-600 truncate block">{{ conversation.lastMessage }}</text>
</nut-col>
</nut-row>
</view>
</view>
</view>
<!-- 空状态提示 -->
......@@ -528,14 +528,15 @@ onUnmounted(() => {
}
.avatar-container {
display: flex;
align-items: flex-start;
width: 88rpx;
margin-right: 24rpx;
flex-shrink: 0;
}
.content-container {
padding-left: 8px;
flex: 1;
min-width: 0;
padding-left: 8rpx;
}
.conversation-item:active {
......