概述

上节完成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: 12px 8px;
  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上。
嘟宝地址
嘟妈地址