小程序 聊天室布局样式

urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.scss

@@ -38,7 +38,6 @@
 }
 
 .nav-title {
-    flex: 1;
     font-size: 30rpx;
     font-weight: 600;
     color: #222;
@@ -47,33 +46,57 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
+    max-width: 160rpx;
-
-.nav-actions {
-    display: flex;
-    align-items: center;
-    gap: 16rpx;
     flex-shrink: 0;
 }
 
-.action-btn {
+.nav-right {
-    padding: 12rpx 20rpx;
+    flex: 1;
-    background: rgba(255,255,255,0.9);
+    display: flex;
-    border-radius: 32rpx;
+    flex-direction: row;
-    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    // 小程序需要为右侧胶囊按钮留出空间
+    /* #ifdef MP-WEIXIN */
+    padding-right: 100px;
+    /* #endif */
 }
 
-.action-text {
+.nav-btn {
-    font-size: 26rpx;
+    display: flex;
-    font-weight: 600;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 10px;
+    height: 28px;
+    background: rgba(107, 186, 231, 0.8);
+    border: none;
+    border-radius: 14px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    flex-shrink: 0;
+    margin: 0;
+    line-height: 1;
+}
+
+.nav-btn::after {
+    border: none;
+}
+
+.nav-btn-text {
     color: #173294;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
 }
 
 .meeting-btn {
     background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
 }
 
-.meeting-btn .action-text {
+.meeting-text {
     color: #fff;
 }
 
@@ -104,6 +127,7 @@
 
 .message-row {
     display: flex;
+    flex-direction: row;
     align-items: flex-start;
     gap: 16rpx;
 }

urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue

@@ -9,13 +9,13 @@
 				<view class="nav-back-icon"></view>
 			</view>
 			<text class="nav-title">{{ roomName }}</text>
-			<view class="nav-actions">
+			<view class="nav-right">
-				<view class="action-btn" @tap="handleWorkcaseAction">
+				<button class="nav-btn" @tap="handleWorkcaseAction">
-					<text class="action-text">{{ workcaseId ? '查看工单' : '创建工单' }}</text>
+					<text class="nav-btn-text">{{ workcaseId ? '查看工单' : '创建工单' }}</text>
-				</view>
+				</button>
-				<view class="action-btn meeting-btn" @tap="startMeeting">
+				<button class="nav-btn meeting-btn" @tap="startMeeting">
-					<text class="action-text">发起会议</text>
+					<text class="nav-btn-text meeting-text">发起会议</text>
-				</view>
+				</button>
 			</view>
 		</view>
 
@@ -27,11 +27,13 @@
 					:class="msg.senderType === 'guest' ? 'self' : 'other'">
 					<!-- 对方消息（左侧） -->
 					<view class="message-row other-row" v-if="msg.senderType !== 'guest'">
-						<view class="avatar">
+						<view>
-							<text class="avatar-text">{{ msg.senderName?.charAt(0) || '客' }}</text>
+							<view class="avatar">
+								<text class="avatar-text">{{ msg.senderName?.charAt(0) || '客' }}</text>
+							</view>
+							<text class="sender-name">{{ msg.senderName || '客服' }}</text>
 						</view>
 						<view class="message-content">
-							<text class="sender-name">{{ msg.senderName || '客服' }}</text>
 							<view class="bubble other-bubble">
 								<text class="message-text">{{ msg.content }}</text>
 							</view>
@@ -178,10 +180,13 @@ function loadChatRoom() {
 	// TODO: 调用 workcaseChatAPI.getChatMessagePage() 获取消息列表
 }
 
-// 格式化时间
+// 格式化时间（兼容 iOS）
 function formatTime(time?: string): string {
 	if (!time) return ''
-	const date = new Date(time)
+	// iOS 不支持 "yyyy-MM-dd HH:mm:ss" 格式，需要转换为 "yyyy-MM-ddTHH:mm:ss" 或 "yyyy/MM/dd HH:mm:ss"
+	const iosCompatibleTime = time.replace(' ', 'T')
+	const date = new Date(iosCompatibleTime)
+	if (isNaN(date.getTime())) return ''
 	return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
 }