hookehuyr

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

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