当前位置：首页 > news >正文

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

news 2026/7/1 5:36:40

概述

上节完成vs code 开发vue3项目，配置GitHub Copilot Chat，用通俗的话语言帮我开发项目开发。
嘟宝是为监督孩子身边环境而创建的一套应用，它能够实现后台驻留长连接，随时接收嘟妈信令，建立音视频通道点对点通信，而不需要中转服务器。嘟妈是一套WEB 应用，使用vue3编写，能够兼容app、小程序开发。而嘟宝采用原生Andorid开发，能够获取最大权限，保持在后台运行。
目前为止，嘟宝完成的基本功能设计包括

MQTT 基础通信
后台驻留
SQLite数据存储
二维码显示身份识别码
开启自启动前台服务
任务栏消息发送与点击
高德定位实时更新
webrtc点对点通信
mAgentWeb控件封装解决全屏与获取视频权限问题
嘟妈采用vue3编写它的核心需求已完成包含以下部分:
完成登录注册页面
完成二维码扫描完成与嘟宝绑定
与嘟妈建立音视频通信
查看嘟宝桌面共享视频
首先看下嘟妈中与嘟宝视频对话的页面需要哪些修改，如下图:

可以看到页面分成三部分，如图中红框。第三部分是三个按钮，想通过ai gent帮我修改成水平排列，按钮是上面图片下面文字的样式。按钮现在的html内容是

<div class="video-controls"><van-button @click="call">呼叫嘟宝</van-button><van-button @click="changecam">切换相机</van-button><van-button @click="changescreen">查看桌面</van-button><van-button @click="sendchat"v-show="false">聊天</van-button><van-button @click="bye">下次再会</van-button></div>

向ai gent描述需求

打开bubao.vue,打开 ai gent，输入更换video-controls内按钮的样式，上面图标下面文字，均匀铺开，如下图：

打开页面，看下ai生成的代码样式，如下图：

生成的代码如下:

<div class="video-controls"><van-button class="control-btn"@click="call"><span class="control-btn-content"><van-icon name="phone-o"size="20"/><span>呼叫</span></span></van-button><van-button class="control-btn"@click="changecam"><span class="control-btn-content"><van-icon name="audio"size="20"/><span>对讲</span></span></van-button><van-button class="control-btn"@click="changecam"><span class="control-btn-content"><van-icon name="replay"size="20"/><span>切换</span></span></van-button><van-button class="control-btn"@click="changescreen"><span class="control-btn-content"><van-icon name="desktop-o"size="20"/><span>桌面</span></span></van-button><van-button class="control-btn"@click="bye"><span class="control-btn-content"><van-icon name="cross"size="20"/><span>再会</span></span></van-button><van-button class="control-btn"@click="bye"><span class="control-btn-content"><van-icon name="more"size="20"/><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%;}