概述

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

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

可以看到，当点击嘟宝时，嘟宝页面并未挡住底部导航栏。应是全屏显示，UI美观。重新组织网页骨架

重新组织网页骨架

router.ts路由信息

import { createRouter,/*createWebHistory,*/createWebHashHistory } from "vue-router";
import { getUserData } from '@/api/storge'

const routes = [
  { path: '/', redirect: '/main'},
  {
    path: '/home', name: 'Home', component: () => import('@/view/home.vue'),
    children: [
      { path: '/main', name: 'Main', component: () => import('@/view/main.vue') },
      { path: '/code', name: 'Code', component: () => import('@/view/qrcode.vue') },
      { path: '/me', name: 'me', component: () => import('@/view/me.vue') },
        ]
  },
  { path: '/dubao/:dubaoId', name: 'Dubao', component: () => import('@/view/dubao.vue') },
  { path: '/login', name: 'login', component: () => import('@/view/login.vue') },
]
const router = createRouter(
  {
    // history: createWebHistory(),
    history: createWebHashHistory(),
    routes: routes
  }
)




router.beforeEach((to) => {
  const token = getUserData();
  if (!token && to.path !== '/login') {
    return {
      path: '/login'
    }
  }

  return true
})
export default router;

app.vue源码

<template>
  <div class="app">
     <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
  </div>
</template>
<script setup lang="ts">
import { onMounted,onUnmounted } from 'vue'
import { useMQTTStore } from './store/mqtt';
const mqtt = useMQTTStore()
mqtt.$subscribe(async (mutate:any, state) => {
    if (typeof mutate.events.newValue === 'boolean') {
    return;
  }
  let data = JSON.parse(state.datamsg);
  let msg = JSON.parse(data.msg);
  switch (msg.code) {
    case 'answer':
      break;
    case 'ice':
      default:
        break;
    }

});
onMounted(() => {
  mqtt.connect();
})
onUnmounted(() => {
  mqtt.disconnect();
});
</script>

home.vue主页页面

<template>
  <div class="app">
    <!-- 路由视图 -->
     <div class="main">
       <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
     </div>

    <!-- 底部 Tabbar（使用 Vant 4 语法） -->
    <van-tabbar route fixed placeholder>
      <van-tabbar-item replace to="/main" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/code" icon="scan">扫一扫</van-tabbar-item>
      <van-tabbar-item replace to="/me" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
</script>

其他home子页面

home导航栏有三个页面，分别是

• main.vue
• scan.vue
• me.vue
  项目地址在github上。
  嘟宝地址
  嘟妈地址

#演示效果