概述上节实现了嘟宝与嘟妈通过webrtc实现点对点通信。能够随时通过MQTT协议拉取在后台运行嘟宝的音频流。嘟宝是为监督孩子身边环境而创建的一套应用它能够实现后台驻留长连接随时接收嘟妈信令建立音视频通道点对点通信而不需要中转服务器。嘟妈是一套WEB 应用使用vue3编写能够兼容app、小程序开发 。而嘟宝采用原生Andorid开发能够获取最大权限保持在后台运行。目前为止嘟宝完成的基本功能设计包括MQTT 基础通信后台驻留SQLite数据存储二维码显示身份识别码开启自启动前台服务任务栏消息发送与点击高德定位实时更新webrtc点对点通信mAgentWeb控件封装解决全屏与获取视频权限问题嘟妈采用vue3编写它的核心需求已完成包含以下部分:完成登录注册页面完成二维码扫描完成与嘟宝绑定与嘟妈建立音视频通信查看嘟宝桌面共享视频嘟妈使用vs code开发工具将vue3同步到github上同时安装GitHub Copilot与GitHub Copilot Chat。Copilot free免费版本对于一般开发者用户相当够用了。GitHub Copilot Chat本质上是 GitHub Copilot 的对话式交互版本一种内置于 IDE 的 AI 编程助手。上下文感知它能理解你当前打开的代码文件、光标位置甚至选中的代码片段并基于这些上下文给出更精准的回答多模态能力除了纯文本对话它通常支持通过 命令如 /explain、/fix、/tests来触发特定的快捷操作也能引用当前文件或工作区中的其他文件作为上下文内联交互你不仅可以在专门的聊天窗口提问也可以直接在代码编辑器里选中代码通过右键菜单或快捷键唤出内联聊天框快速执行“解释这段代码”或“生成单元测试”等任务在vscode扩展商店安装GitHub Copilot 与GitHub Copilot Chat两个控件安装完成后提示登录若无法登录则应考虑网络问题如下图安装完成后在右侧出现 Copilot Chat如下图使用 Copilot Chat设计me.vue嘟妈首页与扫码页面设计完成me页面内容是空的使用Copilot Chat设计该页面只需要一句话描述的话即可。帮我设计me.vue我的页面如下图运行查看ai设计的页面是否够用,如下图:一句话生成的页面还是相当满意的。接下来看下源码templatediv classme-pagediv classprofile-bannerdiv classprofile-avatarvan-icon nameuser-circle-osize42//divdiv classprofile-infodiv classprofile-name{{userName}}/divdiv classprofile-subtitle设备ID{{user.dumaId||暂无}}/divdiv classprofile-status{{connectionStatus}}/div/div/divvan-cell-groupvan-cell title账号:valueuser.account || 未绑定iconcontact/van-cell title登录状态:valueconnectionStatusiconinfo-o/van-cell title最新消息:valuemessagePreviewiconchat-o//van-cell-groupdiv classmenu-listvan-cell title扫一扫is-link iconscanclickgoToCode/van-cell title我的收藏is-link iconstar-oclickshowNotReady(我的收藏)/van-cell title设置is-link iconsetting-oclickshowNotReady(设置)/van-cell title关于我们is-link iconinfo-oclickshowNotReady(关于我们)//divdiv classaction-areavan-button block round typeprimaryclickhandleLogout退出登录/van-button/div/div/templatescript setup langtsimport{computed,reactive,onMounted}fromvueimport{useRouter}fromvue-routerimport{showToast}fromvantimport{useMQTTStore}from/store/mqttimport{getUserData,removeUserData}from/api/storgeconst routeruseRouter()const mqttuseMQTTStore()const userreactive({account:,dumaId:})const userNamecomputed(()(user.account?user.account:嘟妈用户))const messagePreviewcomputed(()mqtt.datamsg||暂无消息)const connectionStatuscomputed(()(mqtt.duma?已连接:未连接))functionloadUser(){const rawgetUserData()if(!raw){router.replace(/login)return}try{const parsedJSON.parse(raw)user.accountparsed.account||user.dumaIdparsed.dumaId||}catch(error){console.warn(解析用户信息失败,error)}}functionhandleLogout(){removeUserData()showToast(已退出登录)router.replace(/login)}functiongoToCode(){router.push(/code)}functionshowNotReady(title:string){showToast(${title}功能正在开发中)}onMounted((){loadUser()})/scriptstyle scoped.me-page{min-height:100vh;background-color:#f5f7fb;}.profile-banner{display:flex;align-items:center;gap:16px;padding:30px22px28px;background:linear-gradient(135deg,#409eff0%,#6f96ff100%);color:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;}.profile-avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;}.profile-info{flex:1;}.profile-name{font-size:20px;font-weight:700;margin-bottom:6px;}.profile-subtitle,.profile-status{font-size:14px;color:rgba(255,255,255,0.84);line-height:1.5;}.menu-list{margin-top:18px;}.action-area{padding:18px22px;}:deep(.van-cell){background-color:#fff;}:deep(.van-cell__title){font-weight:500;}:deep(.van-button){margin-top:10px;}/style它能够根据我开发的进度使用ui库与第三方库帮我生成对应的代码。后面我只需要对该页面进行裁剪就可得到想要的页面。