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

至此整个项目算大致介绍完毕，相关代码我已经开源到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>