从0到1构建奶牛行为智能监控系统 (八) 前端页面构建(包含代码开源地址)

前面已经实现了后端大模型部署、数据库搭建和工具模型的部署，这期介绍前端页面设计将算法整合到页面中。

至此整个项目算大致介绍完毕，相关代码我已经开源到github：https://github.com/cloud-fish/CowSentinel 大家有需要的自行取用

相关演示放在b站：【农业工程博士用vibe coding做的奶牛AI监控系统】 https://www.bilibili.com/video/BV1pZ5M6iEQk/?share_source=copy_web&vd_source=41d20be1395f44744c281b3289cb4d8c

一、界面结构

界面为三段式界面加隐藏抽屉的结构，左侧为监控列表组件，中间为实时画面组件，右侧为智能助手组件

隐藏抽屉打开可以展示大模型调用的独立工具页面

二、基于Vue 3的单页应用(spa)

使用vite构建工具，基于Vue3框架，pinia做状态管理，axios做HTTP 请求，UI组件库主要使用element plus，图表可视化使用echarts。

2.1.页面交互逻辑

这部分代码主要放在<script>中，主要放置交互式变量、页面互动响应等等。变量放于pinia构建的容器中，可以使变量在组件之间共享。

//交互逻辑 <script setup> import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue' import { storeToRefs } from 'pinia' onMounted(() => { // 初始化逻辑 } ) onBeforeUnmount(() => { // 清理逻辑 } ) </script>

2.2.页面布局

这部分主要描述页面布局，采用了父子组件的设计方式，每个子组件单独设计，方便开发修改

//页面布局 <template> <div> //左侧监控列表 <AgentConsoleMonitorList> //中间实时显示 <AgentConsoleRealtimePanel> //右侧ai助手 <AgentConsoleAssistantPanel> //隐藏抽屉 <AgentConsoleWorkbenchDrawer> </div> </template>

2.3.样式

这里主要定义组件的样式，例如字体大小、颜色和组件布局方式等等。可以使用tailwind库进行标准样式的设计，对于一些有特殊需求的再单独写style

//样式 <style> </style>