概述

上节完成使用ai agent生成菜单功能。

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

• MQTT 基础通信
• 后台驻留
• SQLite数据存储
• 二维码显示身份识别码
• 开启自启动前台服务
• 任务栏消息发送与点击
• 高德定位实时更新
• webrtc点对点通信
• mAgentWeb控件封装解决全屏与获取视频权限问题
  嘟妈采用vue3编写它的核心需求已完成包含以下部分:
• 完成登录注册页面
• 完成二维码扫描完成与嘟宝绑定
• 与嘟妈建立音视频通信
• 查看嘟宝桌面共享视频
  项目地址在github上。
  嘟宝地址
  嘟妈地址
  ui库使用vant开发，但图标库很少，如下图
  
  对于对讲、桌面图标需要成对出现
• 开启对讲、关闭对讲
• 开启桌面、关闭桌面

阿里图标

阿里图标通常指的是 Iconfont（阿里巴巴矢量图标库）—— 一个由阿里妈妈团队打造的矢量图标管理与交流平台。它凭借免费、海量、易用三大特点，已成为国内设计师和开发者首选的“必备工具”
地址

• 主页检索自己的图标，
• 选择合适的图标加入购物车
• 将购物车内图标放入嘟妈项目内
• 在资源管理菜单中找到我的项目
• 从嘟妈项目内下载图标
  
  
  
  
  
  下载图标到本地：如下图
  

vue3引用本地阿里图标

在 Vue 3 项目中使用阿里图标库 (iconfont)，主要有两种主流方式：在线链接引用和下载到本地使用。其中使用 SVG Symbol 方式（尤其是下载到本地）是目前更推荐的做法，因为它支持多色图标，且不依赖外部网络
将下载后的文件解压到项目目录中，如下图：

打开demo_index.html，里面是使用说明，如下图：

app.vue全局引入iconfont.js

import '@/assets/font/iconfont.js' // 引入本地CSS文件

在dubao.vue直接使用图标

<span>
             <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-shengyin"></use>
            </svg>
          </span>

注意一点，就是#icon-shengyin，这个是图标的id，在demo_index.html内查看id所对应的内容。
如下图

运行，将对讲的图标，改成喇叭样式。效果如下：