手把手编写儿童手机远程监控App之vue3用 AI Gent生成水平排列的按钮

概述上节完成vs code 开发vue3项目配置GitHub Copilot Chat用通俗的话语言帮我开发项目开发。嘟宝是为监督孩子身边环境而创建的一套应用它能够实现后台驻留长连接随时接收嘟妈信令建立音视频通道点对点通信而不需要中转服务器。嘟妈是一套WEB 应用使用vue3编写能够兼容app、小程序开发 。而嘟宝采用原生Andorid开发能够获取最大权限保持在后台运行。目前为止嘟宝完成的基本功能设计包括MQTT 基础通信后台驻留SQLite数据存储二维码显示身份识别码开启自启动前台服务任务栏消息发送与点击高德定位实时更新webrtc点对点通信mAgentWeb控件封装解决全屏与获取视频权限问题嘟妈采用vue3编写它的核心需求已完成包含以下部分:完成登录注册页面完成二维码扫描完成与嘟宝绑定与嘟妈建立音视频通信查看嘟宝桌面共享视频首先看下嘟妈中与嘟宝视频对话的页面需要哪些修改如下图:可以看到页面分成三部分如图中红框。第三部分是三个按钮想通过ai gent帮我修改成水平排列按钮是上面图片下面文字的样式。按钮现在的html内容是div classvideo-controlsvan-button clickcall呼叫嘟宝/van-buttonvan-button clickchangecam切换相机/van-buttonvan-button clickchangescreen查看桌面/van-buttonvan-button clicksendchatv-showfalse聊天/van-buttonvan-button clickbye下次再会/van-button/div向ai gent描述需求打开bubao.vue,打开 ai gent输入更换video-controls内按钮的样式上面图标下面文字均匀铺开如下图打开页面看下ai生成的代码样式如下图生成的代码如下:div classvideo-controlsvan-button classcontrol-btnclickcallspan classcontrol-btn-contentvan-icon namephone-osize20/span呼叫/span/span/van-buttonvan-button classcontrol-btnclickchangecamspan classcontrol-btn-contentvan-icon nameaudiosize20/span对讲/span/span/van-buttonvan-button classcontrol-btnclickchangecamspan classcontrol-btn-contentvan-icon namereplaysize20/span切换/span/span/van-buttonvan-button classcontrol-btnclickchangescreenspan classcontrol-btn-contentvan-icon namedesktop-osize20/span桌面/span/span/van-buttonvan-button classcontrol-btnclickbyespan classcontrol-btn-contentvan-icon namecrosssize20/span再会/span/span/van-buttonvan-button classcontrol-btnclickbyespan classcontrol-btn-contentvan-icon namemoresize20/span更多/span/span/van-button/div// css.video-controls{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:12px8px;flex-wrap:nowrap;overflow-x:auto;background-color:black;}.control-btn{flex:1;min-width:22px;height:40px;border-radius:10px;background:#f7f8fa;color:#333;border:1px solid #e5e7eb;white-space:nowrap;}.control-btn-content{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;font-size:12px;}.control-btn:deep(.van-button__content){width:100%;height:100%;}针对内容我再手动添加对讲、更多按钮。嘟宝写到现在基本功能都已经实现。项目地址在github上。嘟宝地址嘟妈地址