聊天室创建逻辑修改和样式修正

2025-12-30 20:55:25 +08:00
parent babfe9fb48
commit f287f36496
14 changed files with 591 additions and 312 deletions
--- a/urbanLifelineServ/.bin/database/postgres/sql/createTableWorkcase.sql
+++ b/urbanLifelineServ/.bin/database/postgres/sql/createTableWorkcase.sql
@@ -38,6 +38,7 @@ CREATE TABLE workcase.tb_chat_room(
    guest_name         VARCHAR(100)  NOT NULL,                         -- 来客姓名
    ai_session_id      VARCHAR(50)   DEFAULT NULL,                     -- AI对话会话ID（从ai.tb_chat同步）
    message_count      INTEGER       NOT NULL DEFAULT 0,               -- 消息总数
+    device_code        VARCHAR(50)   NOT NULL,                         -- 设备代码
    last_message_time  TIMESTAMPTZ   DEFAULT NULL,                     -- 最后消息时间
    last_message       TEXT          DEFAULT NULL,                     -- 最后一条消息内容（用于列表展示）
    comment_level      INTEGER       DEFAULT 0,                        -- 服务评分（1-5）
--- a/urbanLifelineServ/apis/api-workcase/src/main/java/org/xyzh/api/workcase/dto/TbChatRoomDTO.java
+++ b/urbanLifelineServ/apis/api-workcase/src/main/java/org/xyzh/api/workcase/dto/TbChatRoomDTO.java
@@ -63,6 +63,9 @@ public class TbChatRoomDTO extends BaseDTO {
    @Schema(description = "服务评分（1-5星）")
    private Integer commentLevel;

+    @Schema(description = "设备代码")
+    private String deviceCode;
+
    @Schema(description = "关闭人")
    private String closedBy;

--- a/urbanLifelineServ/apis/api-workcase/src/main/java/org/xyzh/api/workcase/vo/ChatRoomVO.java
+++ b/urbanLifelineServ/apis/api-workcase/src/main/java/org/xyzh/api/workcase/vo/ChatRoomVO.java
@@ -66,6 +66,9 @@ public class ChatRoomVO extends BaseVO {
    @Schema(description = "服务评分（1-5星）")
    private Integer commentLevel;

+    @Schema(description = "设备代码")
+    private String deviceCode;
+
    @Schema(description = "关闭人")
    private String closedBy;
    
--- a/urbanLifelineServ/workcase/src/main/java/org/xyzh/workcase/controller/WorkcaseChatController.java
+++ b/urbanLifelineServ/workcase/src/main/java/org/xyzh/workcase/controller/WorkcaseChatController.java
@@ -60,7 +60,7 @@ import io.swagger.v3.oas.annotations.tags.Tag;
@Validated
@RestController
@RequestMapping("/workcase/chat")
-public class WorkcaseChatContorller {
+public class WorkcaseChatController {

    @Autowired
    private WorkcaseChatService workcaseChatService;
@@ -78,7 +78,8 @@ public class WorkcaseChatContorller {
    @PostMapping("/room")
    public ResultDomain<TbChatRoomDTO> createChatRoom(@RequestBody TbChatRoomDTO chatRoom) {
        ValidationResult vr = ValidationUtils.validate(chatRoom, Arrays.asList(
-            ValidationUtils.requiredString("guestId", "来客ID")
+            ValidationUtils.requiredString("guestId", "来客ID"),
+            ValidationUtils.requiredString("deviceCode", "设备代码")
        ));
        if (!vr.isValid()) {
            return ResultDomain.failure(vr.getAllErrors());
@@ -88,7 +89,7 @@ public class WorkcaseChatContorller {
            return chatRoomService.createChatRoom(chatRoom);
        } catch (Exception e) {
            return ResultDomain.failure(e.getMessage());
-        } 
+        }
    }

    @Operation(summary = "更新聊天室")
--- a/urbanLifelineServ/workcase/src/main/resources/mapper/TbChatRoomMapper.xml
+++ b/urbanLifelineServ/workcase/src/main/resources/mapper/TbChatRoomMapper.xml
@@ -13,6 +13,7 @@
        <result column="guest_name" property="guestName" jdbcType="VARCHAR"/>
        <result column="ai_session_id" property="aiSessionId" jdbcType="VARCHAR"/>
        <result column="message_count" property="messageCount" jdbcType="INTEGER"/>
+        <result column="device_code" property="deviceCode" jdbcType="VARCHAR"/>
        <result column="last_message_time" property="lastMessageTime" jdbcType="TIMESTAMP"/>
        <result column="last_message" property="lastMessage" jdbcType="VARCHAR"/>
        <result column="comment_level" property="commentLevel" jdbcType="INTEGER"/>
@@ -36,6 +37,7 @@
        <result column="guest_name" property="guestName" jdbcType="VARCHAR"/>
        <result column="ai_session_id" property="aiSessionId" jdbcType="VARCHAR"/>
        <result column="message_count" property="messageCount" jdbcType="INTEGER"/>
+        <result column="device_code" property="deviceCode" jdbcType="VARCHAR"/>
        <result column="unread_count" property="unreadCount" jdbcType="INTEGER"/>
        <result column="last_message_time" property="lastMessageTime" jdbcType="TIMESTAMP"/>
        <result column="last_message" property="lastMessage" jdbcType="VARCHAR"/>
@@ -51,13 +53,13 @@

    <sql id="Base_Column_List">
        room_id, optsn, workcase_id, room_name, room_type, status, guest_id, guest_name,
-        ai_session_id, message_count, last_message_time, last_message, comment_level, closed_by, closed_time,
+        ai_session_id, message_count, device_code, last_message_time, last_message, comment_level, closed_by, closed_time,
        creator, create_time, update_time, delete_time, deleted
    </sql>

    <insert id="insertChatRoom" parameterType="org.xyzh.api.workcase.dto.TbChatRoomDTO">
        INSERT INTO workcase.tb_chat_room (
-            optsn, room_id, workcase_id, room_name, guest_id, guest_name, creator
+            optsn, room_id, workcase_id, room_name, guest_id, guest_name, device_code, creator
            <if test="roomType != null">, room_type</if>
            <if test="status != null">, status</if>
            <if test="aiSessionId != null">, ai_session_id</if>
@@ -65,7 +67,7 @@
            <if test="lastMessageTime != null">, last_message_time</if>
            <if test="lastMessage != null">, last_message</if>
        ) VALUES (
-            #{optsn}, #{roomId}, #{workcaseId}, #{roomName}, #{guestId}, #{guestName}, #{creator}
+            #{optsn}, #{roomId}, #{workcaseId}, #{roomName}, #{guestId}, #{guestName}, #{deviceCode}, #{creator}
            <if test="roomType != null">, #{roomType}</if>
            <if test="status != null">, #{status}</if>
            <if test="aiSessionId != null">, #{aiSessionId}</if>
@@ -84,6 +86,7 @@
            <if test="status != null and status != ''">status = #{status},</if>
            <if test="aiSessionId != null">ai_session_id = #{aiSessionId},</if>
            <if test="messageCount != null">message_count = #{messageCount},</if>
+            <if test="deviceCode != null and deviceCode != ''">device_code = #{deviceCode},</if>
            <if test="lastMessageTime != null">last_message_time = #{lastMessageTime},</if>
            <if test="lastMessage != null">last_message = #{lastMessage},</if>
            <if test="commentLevel != null">comment_level = #{commentLevel},</if>
@@ -124,7 +127,7 @@

    <select id="selectChatRoomPage" resultMap="VOResultMap">
        SELECT r.room_id, r.optsn, r.workcase_id, r.room_name, r.room_type, r.status,
-               r.guest_id, r.guest_name, r.ai_session_id, r.message_count,
+               r.guest_id, r.guest_name, r.ai_session_id, r.message_count, r.device_code,
               r.last_message_time, r.last_message, r.comment_level, r.closed_by, r.closed_time,
               r.creator, r.create_time, r.update_time, r.delete_time, r.deleted,
               COALESCE(m.unread_count, 0) as unread_count
--- a/urbanLifelineWeb/packages/workcase/src/types/workcase/chatRoom.ts
+++ b/urbanLifelineWeb/packages/workcase/src/types/workcase/chatRoom.ts
@@ -13,6 +13,7 @@ export interface TbChatRoomDTO extends BaseDTO {
    status?: string
    guestId?: string
    guestName?: string
+    deviceCode?: string
    aiSessionId?: string
    currentAgentId?: string
    agentCount?: number
@@ -164,6 +165,7 @@ export interface ChatRoomVO extends BaseVO {
    status?: string
    guestId?: string
    guestName?: string
+    deviceCode?: string
    aiSessionId?: string
    currentAgentId?: string
    currentAgentName?: string
--- a/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue
+++ b/urbanLifelineWeb/packages/workcase/src/views/public/ChatRoom/ChatRoomView.vue
@@ -189,7 +189,7 @@ import { Client } from '@stomp/stompjs'
 // WebSocket配置 (通过Nginx代理访问网关，再到workcase服务)
 // SockJS URL (http://)
 const getWsUrl = () => {
-    const token = localStorage.getItem('token')!
+    const token = JSON.parse(localStorage.getItem('token')!).value
    const protocol = window.location.protocol
    const host = window.location.host
    return `${protocol}//${host}/api/urban-lifeline/workcase/ws/chat-sockjs?token=${encodeURIComponent(token)}`
@@ -557,32 +557,6 @@ const startMeeting = async () => {
            }
            return
        }
-
-        // 没有活跃会议，创建新会议
-        const createResult = await workcaseChatAPI.createVideoMeeting({
-            roomId: currentRoomId.value,
-            meetingName: currentRoom.value?.roomName || '视频会议'
-        })
-
-        if (createResult.success && createResult.data) {
-            const currentMeetingId = createResult.data.meetingId!
-
-            // 开始会议
-            await workcaseChatAPI.startVideoMeeting(currentMeetingId)
-
-            // 加入会议获取会议页面URL
-            const joinResult = await workcaseChatAPI.joinVideoMeeting(currentMeetingId)
-            if (joinResult.success && joinResult.data?.iframeUrl) {
-                // 使用router跳转到JitsiMeetingView页面，附加roomId参数用于返回
-                const meetingUrl = joinResult.data.iframeUrl + `&roomId=${currentRoomId.value}`
-                router.push(meetingUrl)
-                ElMessage.success('会议已创建')
-            } else {
-                ElMessage.error(joinResult.message || '获取会议链接失败')
-            }
-        } else {
-            ElMessage.error(createResult.message || '创建会议失败')
-        }
    } catch (error) {
        console.error('发起会议失败:', error)
        ElMessage.error('发起会议失败')
@@ -707,8 +681,16 @@ const subscribeToRoom = (roomId: string) => {
        // 避免重复添加自己发送的普通消息
        // 但会议消息（meet类型）始终添加，因为它是系统生成的通知
        if (chatMessage.messageType === 'meet' || chatMessage.senderId !== loginDomain.user.userId) {
-            messages.value.push(chatMessage)
-            scrollToBottom()
+            // 会议消息延时处理，等待数据库事务提交
+            if (chatMessage.messageType === 'meet') {
+                console.log('[ChatRoom] 收到会议消息，延时1秒后刷新')
+                setTimeout(() => {
+                    loadMessages(roomId)
+                }, 1000)
+            } else {
+                messages.value.push(chatMessage)
+                scrollToBottom()
+            }
        }
    })
 }
--- a/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue
+++ b/urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue
@@ -784,6 +784,16 @@ function handleNewMessage(message: ChatRoomMessageVO) {
 		return
 	}

+	// 会议消息延时处理，等待数据库事务提交
+	if (message.messageType === 'meet') {
+		console.log('[chatRoom] 收到会议消息，延时1秒后刷新')
+		setTimeout(async () => {
+			// 重新加载最新消息，确保获取到完整的会议消息数据
+			await loadMessages()
+		}, 1000)
+		return
+	}
+
 	// 添加新消息到列表
 	messages.push(message)
 	nextTick(() => scrollToBottom())
--- a/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
+++ b/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
@@ -696,3 +696,110 @@
        opacity: 1;
    }
 }
+
+// 设备代码输入弹窗样式
+.device-code-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    position: relative;
+    background-color: white;
+    border-radius: 16px;
+    width: 80%;
+    max-width: 320px;
+    padding: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    margin-bottom: 20px;
+}
+
+.modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    text-align: center;
+    display: block;
+}
+
+.modal-body {
+    margin-bottom: 20px;
+}
+
+.device-code-input {
+    width: 100%;
+    height: 44px;
+    padding: 0 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 16px;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+}
+
+.device-code-input:focus {
+    border-color: #007AFF;
+    background-color: white;
+    outline: none;
+}
+
+.modal-footer {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+}
+
+.modal-btn {
+    flex: 1;
+    height: 44px;
+    border-radius: 8px;
+    border: none;
+    font-size: 16px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.modal-btn.cancel {
+    background-color: #f5f5f5;
+    color: #666;
+}
+
+.modal-btn.cancel:active {
+    background-color: #e5e5e5;
+}
+
+.modal-btn.confirm {
+    background-color: #007AFF;
+    color: white;
+}
+
+.modal-btn.confirm:active {
+    background-color: #0056b3;
+}
+
+.modal-btn .btn-text {
+    font-size: 16px;
+}
--- a/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue
+++ b/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue
@@ -148,6 +148,33 @@
 		</view>

 	</view>
+
+	<!-- 设备代码输入弹窗 -->
+	<view class="device-code-modal" v-if="showDeviceCodeDialog">
+		<view class="modal-mask" @tap="cancelDeviceCodeInput"></view>
+		<view class="modal-content">
+			<view class="modal-header">
+				<text class="modal-title">请输入设备代码</text>
+			</view>
+			<view class="modal-body">
+				<input
+					class="device-code-input"
+					v-model="deviceCodeInput"
+					placeholder="请输入设备代码"
+					focus
+					@confirm="confirmDeviceCodeInput"
+				/>
+			</view>
+			<view class="modal-footer">
+				<button class="modal-btn cancel" @tap="cancelDeviceCodeInput">
+					<text class="btn-text">取消</text>
+				</button>
+				<button class="modal-btn confirm" @tap="confirmDeviceCodeInput">
+					<text class="btn-text">确定</text>
+				</button>
+			</view>
+		</view>
+	</view>
 </template>

 <script setup lang="ts">
@@ -194,6 +221,12 @@
 	const chatId = ref<string>('') // 当前会话ID
 	const currentTaskId = ref<string>('') // 当前任务ID（用于停止）

+	// 设备代码相关
+	const deviceCode = ref<string>('') // 设备代码
+	const showDeviceCodeDialog = ref<boolean>(false) // 是否显示设备代码输入弹窗
+	const deviceCodeInput = ref<string>('') // 弹窗中的设备代码输入
+	const pendingAction = ref<'workcase' | 'human' | ''>('') // 待执行的操作类型
+
 	// 初始化用户信息
 	async function initUserInfo() {
 		// #ifdef MP-WEIXIN
@@ -489,10 +522,54 @@
 		}
 	}

-	// 直接跳转到工单详情页的 create 模式（复用 workcaseDetail 页面）
-	async function showCreator() {
-		// 首页直接创建工单：为了让工单和聊天室绑定，这里先创建一个聊天室（workcase类型），再带 roomId 跳转
-		// 如果你希望“无聊天室也能创建工单”，后端 WorkcaseServiceImpl 也支持 roomId 为空时自动创建聊天室
+	// 检查并获取设备代码
+	function checkDeviceCode(action: 'workcase' | 'human') {
+		if (!deviceCode.value) {
+			// 如果没有设备代码，显示输入弹窗
+			pendingAction.value = action
+			deviceCodeInput.value = ''
+			showDeviceCodeDialog.value = true
+		} else {
+			// 如果已有设备代码，直接执行对应操作
+			if (action === 'workcase') {
+				doCreateWorkcase()
+			} else {
+				doContactHuman()
+			}
+		}
+	}
+
+	// 确认输入设备代码
+	function confirmDeviceCodeInput() {
+		if (!deviceCodeInput.value.trim()) {
+			uni.showToast({
+				title: '请输入设备代码',
+				icon: 'none'
+			})
+			return
+		}
+
+		deviceCode.value = deviceCodeInput.value.trim()
+		showDeviceCodeDialog.value = false
+
+		// 执行待处理的操作
+		if (pendingAction.value === 'workcase') {
+			doCreateWorkcase()
+		} else if (pendingAction.value === 'human') {
+			doContactHuman()
+		}
+		pendingAction.value = ''
+	}
+
+	// 取消输入设备代码
+	function cancelDeviceCodeInput() {
+		showDeviceCodeDialog.value = false
+		deviceCodeInput.value = ''
+		pendingAction.value = ''
+	}
+
+	// 实际创建工单
+	async function doCreateWorkcase() {
 		uni.showLoading({ title: '正在创建工单...' })
 		try {
 			const res = await workcaseChatAPI.createChatRoom({
@@ -501,6 +578,7 @@
 				roomName: `${userInfo.value.username || '访客'}的工单`,
 				roomType: 'workcase',
 				status: 'active',
+				deviceCode: deviceCode.value,
 				aiSessionId: chatId.value || ''
 			})
 			uni.hideLoading()
@@ -521,6 +599,51 @@
 		}
 	}

+	// 实际联系人工
+	async function doContactHuman() {
+		uni.showLoading({ title: '正在连接客服...' })
+		try {
+			// 创建聊天室
+			const res = await workcaseChatAPI.createChatRoom({
+				guestId: userInfo.value.userId || userInfo.value.wechatId,
+				guestName: userInfo.value.username || '访客',
+				roomName: `${userInfo.value.username || '访客'}的咨询`,
+				roomType: 'guest',
+				status: 'active',
+				deviceCode: deviceCode.value,
+				aiSessionId: chatId.value || ''
+			})
+			uni.hideLoading()
+
+			if (res.success && res.data) {
+				const roomId = res.data.roomId
+				console.log('创建聊天室成功:', roomId)
+				// 跳转到聊天室页面
+				uni.navigateTo({
+					url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${roomId}&roomName=${encodeURIComponent(res.data.roomName || '人工客服')}`
+				})
+			} else {
+				uni.showToast({
+					title: res.message || '连接客服失败',
+					icon: 'none'
+				})
+			}
+		} catch (error: any) {
+			uni.hideLoading()
+			console.error('创建聊天室失败:', error)
+			uni.showToast({
+				title: '连接客服失败，请稍后重试',
+				icon: 'none'
+			})
+		}
+	}
+
+	// 直接跳转到工单详情页的 create 模式（复用 workcaseDetail 页面）
+	async function showCreator() {
+		// 检查设备代码
+		checkDeviceCode('workcase')
+	}
+
 	// 兼容旧逻辑：不再使用页面内工单创建器
 	function hideCreator() {
 		showWorkcaseCreator.value = false
@@ -557,40 +680,8 @@

 	// 联系人工客服 - 创建聊天室并进入
 	async function contactHuman() {
-		uni.showLoading({ title: '正在连接客服...' })
-		try {
-			// 创建聊天室
-			const res = await workcaseChatAPI.createChatRoom({
-				guestId: userInfo.value.userId || userInfo.value.wechatId,
-				guestName: userInfo.value.username || '访客',
-				roomName: `${userInfo.value.username || '访客'}的咨询`,
-				roomType: 'guest',
-				status: 'active',
-				aiSessionId: chatId.value || ''
-			})
-			uni.hideLoading()
-			
-			if (res.success && res.data) {
-				const roomId = res.data.roomId
-				console.log('创建聊天室成功:', roomId)
-				// 跳转到聊天室页面
-				uni.navigateTo({
-					url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${roomId}&roomName=${encodeURIComponent(res.data.roomName || '人工客服')}`
-				})
-			} else {
-				uni.showToast({
-					title: res.message || '连接客服失败',
-					icon: 'none'
-				})
-			}
-		} catch (error: any) {
-			uni.hideLoading()
-			console.error('创建聊天室失败:', error)
-			uni.showToast({
-				title: '连接客服失败，请稍后重试',
-				icon: 'none'
-			})
-		}
+		// 检查设备代码
+		checkDeviceCode('human')
 	}

 	// 处理快速问题
--- a/urbanLifelineWeb/packages/workcase_wechat/pages/meeting/meetingCreate/MeetingCreate.scss
+++ b/urbanLifelineWeb/packages/workcase_wechat/pages/meeting/meetingCreate/MeetingCreate.scss
@@ -1,116 +1,185 @@
-.meeting-create-page {
-	min-height: 100vh;
-	background-color: #f5f7fa;
-	padding-bottom: 120rpx;
+.page {
+    background: #f8fafc;
 }

-.page-header {
-	background-color: #fff;
-	padding: 32rpx;
-	border-bottom: 1px solid #ebeef5;
+.nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    flex-direction: row;
+    align-items: flex-end;
+    padding-left: 24rpx;
+    padding-right: 24rpx;
+    padding-bottom: 16rpx;
+    z-index: 100;
+    border-bottom: 1rpx solid #e5e7eb;
 }

-.page-title {
-	font-size: 36rpx;
-	font-weight: 600;
-	color: #303133;
+.nav-back {
+    width: 60rpx;
+    height: 64rpx;
+    align-items: center;
+    justify-content: center;
 }

+.nav-back-icon {
+    width: 20rpx;
+    height: 20rpx;
+    border-left-width: 4rpx;
+    border-left-style: solid;
+    border-left-color: #333;
+    border-bottom-width: 4rpx;
+    border-bottom-style: solid;
+    border-bottom-color: #333;
+    transform: rotate(45deg);
+}
+
+.nav-title {
+    flex: 1;
+    font-size: 34rpx;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+    line-height: 64rpx;
+}
+
+.nav-capsule {
+    width: 174rpx;
+    height: 64rpx;
+}
+
+.content {
+    padding: 24rpx;
+    padding-bottom: 140rpx;
+}
+
+.section {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 24rpx;
+    margin-bottom: 20rpx;
+}
+
+// 表单容器
 .form-container {
-	background-color: #fff;
-	margin-top: 16rpx;
+    background: #fff;
+    border-radius: 16rpx;
+    overflow: hidden;
 }

 .form-item {
-	padding: 24rpx 32rpx;
-	border-bottom: 1px solid #ebeef5;
-}
-
-.form-item.required .label-text::after {
-	content: ' *';
-	color: #f56c6c;
+    padding: 24rpx;
+    border-bottom-width: 1rpx;
+    border-bottom-style: solid;
+    border-bottom-color: #f3f4f6;
 }

 .form-label {
-	display: flex;
-	align-items: center;
-	margin-bottom: 16rpx;
-}
-
-.label-text {
-	font-size: 28rpx;
-	color: #606266;
-	font-weight: 500;
-}
-
-.required-star {
-	color: #f56c6c;
-	margin-left: 8rpx;
+    font-size: 26rpx;
+    color: #6b7280;
+    margin-bottom: 16rpx;
+    font-weight: 500;
 }

 .form-input {
-	width: 100%;
-	padding: 16rpx 24rpx;
-	border: 1px solid #dcdfe6;
-	border-radius: 8rpx;
-	font-size: 28rpx;
-	color: #303133;
-}
-
-.picker-display {
-	padding: 16rpx 24rpx;
-	border: 1px solid #dcdfe6;
-	border-radius: 8rpx;
-	font-size: 28rpx;
-	color: #303133;
-}
-
-.picker-display .placeholder {
-	color: #c0c4cc;
+    padding: 0 24rpx;
+    height: 68rpx;
+    background-color: #f9fafb;
+    border-width: 1rpx;
+    border-style: solid;
+    border-color: #e5e7eb;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    color: #111827;
 }

 .form-tip {
-	margin-top: 8rpx;
+    font-size: 24rpx;
+    color: #9ca3af;
+    margin-top: 12rpx;
 }

-.form-tip text {
-	font-size: 24rpx;
-	color: #909399;
+.required {
+    color: #ef4444;
+    margin-left: 4rpx;
 }

-.form-footer {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	display: flex;
-	justify-content: space-between;
-	padding: 24rpx 32rpx;
-	background-color: #fff;
-	border-top: 1px solid #ebeef5;
-	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
+.picker-content {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 68rpx;
+    padding: 0 24rpx;
+    background-color: #f9fafb;
+    border-width: 1rpx;
+    border-style: solid;
+    border-color: #e5e7eb;
+    border-radius: 8rpx;
 }

-.btn {
-	flex: 1;
-	padding: 24rpx 0;
-	border-radius: 8rpx;
-	font-size: 32rpx;
-	text-align: center;
-	border: none;
+.picker-text {
+    flex: 1;
+    font-size: 28rpx;
+    color: #111827;
 }

-.btn-cancel {
-	background-color: #f5f7fa;
-	color: #606266;
-	margin-right: 16rpx;
+.picker-text.placeholder {
+    color: #9ca3af;
 }

-.btn-submit {
-	background-color: #409eff;
-	color: #fff;
+.picker-arrow {
+    font-size: 28rpx;
+    color: #9ca3af;
+    margin-left: 16rpx;
 }

-.btn-submit[loading] {
-	opacity: 0.7;
-}
+// 底部占位
+.footer-placeholder {
+    height: 120rpx;
+}
+
+// 底部操作栏
+.footer-actions {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+    border-top-width: 1rpx;
+    border-top-style: solid;
+    border-top-color: #e5e7eb;
+    padding: 24rpx;
+    flex-direction: row;
+    z-index: 99;
+}
+
+.action-button {
+    flex: 1;
+    height: 80rpx;
+    border-radius: 8rpx;
+    align-items: center;
+    justify-content: center;
+    border-width: 1rpx;
+    border-style: solid;
+    border-color: #e5e7eb;
+    background-color: #fff;
+    margin-right: 24rpx;
+}
+
+.action-button.primary {
+    background-color: #4b87ff;
+    border-color: #4b87ff;
+    margin-right: 0;
+}
+
+.action-button.primary .button-text {
+    color: #fff;
+}
+
+.button-text {
+    font-size: 28rpx;
+    color: #6b7280;
+    font-weight: 500;
+}
--- a/urbanLifelineWeb/packages/workcase_wechat/pages/meeting/meetingCreate/MeetingCreate.uvue
+++ b/urbanLifelineWeb/packages/workcase_wechat/pages/meeting/meetingCreate/MeetingCreate.uvue
@@ -1,122 +1,136 @@
 <template>
-	<view class="meeting-create-page">
-		<view class="page-header">
-			<text class="page-title">创建视频会议</text>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
+	<view class="page">
+		<!-- 导航栏 -->
+		<view class="nav" :style="{ paddingTop: headerPaddingTop + 'px', height: headerTotalHeight + 'px' }">
+			<view class="nav-back" @tap="handleCancel">
+				<view class="nav-back-icon"></view>
+			</view>
+			<text class="nav-title">创建视频会议</text>
+			<view class="nav-capsule"></view>
 		</view>

-		<view class="form-container">
-			<!-- 会议名称 -->
-			<view class="form-item">
-				<view class="form-label">
-					<text class="label-text">会议名称</text>
-				</view>
-				<input
-					v-model="formData.meetingName"
-					class="form-input"
-					placeholder="请输入会议名称"
-					maxlength="50"
-				/>
-			</view>
-
-			<!-- 开始时间 -->
-			<view class="form-item required">
-				<view class="form-label">
-					<text class="label-text">开始时间</text>
-					<text class="required-star">*</text>
-				</view>
-				<picker
-					mode="multiSelector"
-					:value="startTimePickerValue"
-					:range="timePickerRange"
-					@change="handleStartTimeChange"
-				>
-					<view class="picker-display">
-						<text :class="formData.startTime ? '' : 'placeholder'">
-							{{ formData.startTime || '请选择开始时间' }}
-						</text>
+		<!-- 内容区域 -->
+		<scroll-view class="content" scroll-y="true" :style="{ marginTop: headerTotalHeight + 'px' }">
+			<!-- 表单区域 -->
+			<view class="section">
+				<view class="form-container">
+					<!-- 会议名称 -->
+					<view class="form-item">
+						<text class="form-label">会议名称</text>
+						<input
+							v-model="formData.meetingName"
+							class="form-input"
+							placeholder="请输入会议名称"
+							maxlength="50"
+						/>
 					</view>
-				</picker>
-			</view>

-			<!-- 结束时间 -->
-			<view class="form-item required">
-				<view class="form-label">
-					<text class="label-text">结束时间</text>
-					<text class="required-star">*</text>
-				</view>
-				<picker
-					mode="multiSelector"
-					:value="endTimePickerValue"
-					:range="timePickerRange"
-					@change="handleEndTimeChange"
-				>
-					<view class="picker-display">
-						<text :class="formData.endTime ? '' : 'placeholder'">
-							{{ formData.endTime || '请选择结束时间' }}
-						</text>
+					<!-- 开始时间 -->
+					<view class="form-item">
+						<text class="form-label">开始时间<text class="required">*</text></text>
+						<picker
+							mode="multiSelector"
+							:value="startTimePickerValue"
+							:range="timePickerRange"
+							@change="handleStartTimeChange"
+						>
+							<view class="picker-content">
+								<text class="picker-text" :class="{ placeholder: !formData.startTime }">
+									{{ formData.startTime || '请选择开始时间' }}
+								</text>
+								<text class="picker-arrow">></text>
+							</view>
+						</picker>
 					</view>
-				</picker>
-			</view>

-			<!-- 提前入会 -->
-			<view class="form-item">
-				<view class="form-label">
-					<text class="label-text">提前入会（分钟）</text>
-				</view>
-				<input
-					v-model.number="formData.advance"
-					class="form-input"
-					type="number"
-					placeholder="提前入会时间"
-				/>
-				<view class="form-tip">
-					<text>用户可在会议开始前N分钟加入</text>
+					<!-- 结束时间 -->
+					<view class="form-item">
+						<text class="form-label">结束时间<text class="required">*</text></text>
+						<picker
+							mode="multiSelector"
+							:value="endTimePickerValue"
+							:range="timePickerRange"
+							@change="handleEndTimeChange"
+						>
+							<view class="picker-content">
+								<text class="picker-text" :class="{ placeholder: !formData.endTime }">
+									{{ formData.endTime || '请选择结束时间' }}
+								</text>
+								<text class="picker-arrow">></text>
+							</view>
+						</picker>
+					</view>
+
+					<!-- 提前入会 -->
+					<view class="form-item">
+						<text class="form-label">提前入会（分钟）</text>
+						<input
+							v-model.number="formData.advance"
+							class="form-input"
+							type="number"
+							placeholder="提前入会时间"
+						/>
+						<text class="form-tip">用户可在会议开始前N分钟加入</text>
+					</view>
+
+					<!-- 会议密码 -->
+					<view class="form-item">
+						<text class="form-label">会议密码</text>
+						<input
+							v-model="formData.meetingPassword"
+							class="form-input"
+							type="text"
+							password
+							placeholder="可选，留空则无密码"
+							maxlength="20"
+						/>
+					</view>
+
+					<!-- 最大人数 -->
+					<view class="form-item">
+						<text class="form-label">最大人数</text>
+						<input
+							v-model.number="formData.maxParticipants"
+							class="form-input"
+							type="number"
+							placeholder="最大参与人数"
+						/>
+					</view>
 				</view>
 			</view>

-			<!-- 会议密码 -->
-			<view class="form-item">
-				<view class="form-label">
-					<text class="label-text">会议密码</text>
-				</view>
-				<input
-					v-model="formData.meetingPassword"
-					class="form-input"
-					type="text"
-					password
-					placeholder="可选，留空则无密码"
-					maxlength="20"
-				/>
-			</view>
+			<!-- 底部占位 -->
+			<view class="footer-placeholder"></view>
+		</scroll-view>

-			<!-- 最大人数 -->
-			<view class="form-item">
-				<view class="form-label">
-					<text class="label-text">最大人数</text>
-				</view>
-				<input
-					v-model.number="formData.maxParticipants"
-					class="form-input"
-					type="number"
-					placeholder="最大参与人数"
-				/>
+		<!-- 底部操作栏 -->
+		<view class="footer-actions">
+			<view class="action-button" @tap="handleCancel">
+				<text class="button-text">取消</text>
+			</view>
+			<view class="action-button primary" @tap="handleSubmit">
+				<text class="button-text">创建会议</text>
 			</view>
-		</view>
-
-		<!-- 底部按钮 -->
-		<view class="form-footer">
-			<button class="btn btn-cancel" @click="handleCancel">取消</button>
-			<button class="btn btn-submit" :loading="submitting" @click="handleSubmit">创建会议</button>
 		</view>
 	</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>

 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { workcaseChatAPI } from '../../../api/workcase/workcaseChat'
 import type { CreateMeetingParam } from '../../../types/workcase/chatRoom'

+// 响应式数据
+const headerPaddingTop = ref<number>(44)
+const headerTotalHeight = ref<number>(88)
+
 // 路由参数
 const roomId = ref('')
 const workcaseId = ref('')
@@ -136,8 +150,8 @@ const formData = reactive<CreateMeetingParam>({
 const submitting = ref(false)

 // 时间选择器数据
-const startTimePickerValue = ref([0, 0, 0, 0])
-const endTimePickerValue = ref([0, 0, 0, 0])
+const startTimePickerValue = ref([0, 0, 0])
+const endTimePickerValue = ref([0, 0, 0])

 // 生成时间选择器范围
 const timePickerRange = computed(() => {
@@ -179,6 +193,26 @@ onLoad((options: any) => {
 	}
 })

+onMounted(() => {
+	const windowInfo = uni.getWindowInfo()
+	const statusBarHeight = windowInfo.statusBarHeight || 44
+	
+	// #ifdef MP-WEIXIN
+	try {
+		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+		headerPaddingTop.value = menuButtonInfo.top
+		headerTotalHeight.value = menuButtonInfo.bottom + 8
+	} catch (e) {
+		headerPaddingTop.value = statusBarHeight
+		headerTotalHeight.value = statusBarHeight + 44
+	}
+	// #endif
+	// #ifndef MP-WEIXIN
+	headerPaddingTop.value = statusBarHeight
+	headerTotalHeight.value = statusBarHeight + 44
+	// #endif
+})
+
 // 处理开始时间选择
 function handleStartTimeChange(e: any) {
 	const val = e.detail.value
@@ -214,69 +248,45 @@ function handleEndTimeChange(e: any) {
 // 验证表单
 function validateForm(): boolean {
 	if (!formData.startTime) {
-		uni.showToast({
-			title: '请选择开始时间',
-			icon: 'none'
-		})
+		uni.showToast({ title: '请选择开始时间', icon: 'none' })
 		return false
 	}

 	if (!formData.endTime) {
-		uni.showToast({
-			title: '请选择结束时间',
-			icon: 'none'
-		})
+		uni.showToast({ title: '请选择结束时间', icon: 'none' })
 		return false
 	}

-	const start = new Date(formData.startTime).getTime()
-	const end = new Date(formData.endTime).getTime()
+	const start = new Date(formData.startTime.replace(' ', 'T')).getTime()
+	const end = new Date(formData.endTime.replace(' ', 'T')).getTime()

 	if (start < Date.now()) {
-		uni.showToast({
-			title: '开始时间不能早于当前时间',
-			icon: 'none'
-		})
+		uni.showToast({ title: '开始时间不能早于当前时间', icon: 'none' })
 		return false
 	}

 	if (end <= start) {
-		uni.showToast({
-			title: '结束时间必须晚于开始时间',
-			icon: 'none'
-		})
+		uni.showToast({ title: '结束时间必须晚于开始时间', icon: 'none' })
 		return false
 	}

 	if (end - start < 5 * 60 * 1000) {
-		uni.showToast({
-			title: '会议时长不能少于5分钟',
-			icon: 'none'
-		})
+		uni.showToast({ title: '会议时长不能少于5分钟', icon: 'none' })
 		return false
 	}

 	if (end - start > 24 * 60 * 60 * 1000) {
-		uni.showToast({
-			title: '会议时长不能超过24小时',
-			icon: 'none'
-		})
+		uni.showToast({ title: '会议时长不能超过24小时', icon: 'none' })
 		return false
 	}

 	if (formData.advance !== undefined && (formData.advance < 0 || formData.advance > 60)) {
-		uni.showToast({
-			title: '提前入会时间范围为0-60分钟',
-			icon: 'none'
-		})
+		uni.showToast({ title: '提前入会时间范围为0-60分钟', icon: 'none' })
 		return false
 	}

 	if (formData.maxParticipants !== undefined && (formData.maxParticipants < 2 || formData.maxParticipants > 100)) {
-		uni.showToast({
-			title: '参与人数范围为2-100人',
-			icon: 'none'
-		})
+		uni.showToast({ title: '参与人数范围为2-100人', icon: 'none' })
 		return false
 	}

@@ -289,33 +299,24 @@ async function handleSubmit() {
 		return
 	}

-	try {
-		submitting.value = true
+	if (submitting.value) return
+	submitting.value = true

+	try {
 		const result = await workcaseChatAPI.createVideoMeeting(formData)

 		if (result.success && result.data) {
-			uni.showToast({
-				title: '会议创建成功',
-				icon: 'success'
-			})
-
+			uni.showToast({ title: '会议创建成功', icon: 'success' })
 			// 延迟返回，让用户看到成功提示
 			setTimeout(() => {
 				uni.navigateBack()
 			}, 1500)
 		} else {
-			uni.showToast({
-				title: result.message || '创建会议失败',
-				icon: 'none'
-			})
+			uni.showToast({ title: result.message || '创建会议失败', icon: 'none' })
 		}
 	} catch (error) {
 		console.error('创建会议失败:', error)
-		uni.showToast({
-			title: '创建会议失败，请重试',
-			icon: 'none'
-		})
+		uni.showToast({ title: '创建会议失败，请重试', icon: 'none' })
 	} finally {
 		submitting.value = false
 	}
@@ -327,6 +328,6 @@ function handleCancel() {
 }
 </script>

-<style scoped lang="scss">
-@import url('./MeetingCreate.scss')
+<style lang="scss" scoped>
+@import "./MeetingCreate.scss";
 </style>
--- a/urbanLifelineWeb/packages/workcase_wechat/types/workcase/chatRoom.ts
+++ b/urbanLifelineWeb/packages/workcase_wechat/types/workcase/chatRoom.ts
@@ -13,8 +13,9 @@ export interface TbChatRoomDTO extends BaseDTO {
    roomType?: string
    status?: string
    guestId?: string
-    commentLevel?: number
    guestName?: string
+    deviceCode?: string
+    commentLevel?: number
    aiSessionId?: string
    currentAgentId?: string
    agentCount?: number
@@ -164,8 +165,9 @@ export interface ChatRoomVO extends BaseVO {
    roomType?: string
    status?: string
    guestId?: string
-    commentLevel?: string
    guestName?: string
+    commentLevel?: string
+    deviceCode?: string
    aiSessionId?: string
    currentAgentId?: string
    currentAgentName?: string
--- a/修改点.md
+++ b/修改点.md
@@ -0,0 +1,4 @@
+1. createTableWorkcase.sql 修改了tb_chat_room 增加了device_code字段。修改相关dto\vo\xml。
+2. WorkcaseChatController.java 修改创建聊天室的接口，增加了deviceCode字段必传。
+3. 修改workcase/types/workcase/chatRoom.ts里的dto和vo。修改workcase_wechat/types/workcase/chatRoom.ts的dto和vo
+4. 修改workcase_wechat/pages/index/index.uvue。新增const deviceCode = ref('');只有这个有值时，才让用户创建聊天室和工单（工单自动填入表单），否则弹窗让用户填写