灵境万象 · AI 机器人巡检中枢 Dashboard

基于 Vite + Vue 3 构建的 AI 机器人巡检管理系统可视化大屏。

功能特性

• 🎨 深色科技风格设计
• 🤖 实时机器人巡检监控
• 📊 多维度数据可视化
• 🔥 热更新开发体验
• ⚡️ Vite 极速构建
• 📱 响应式布局

技术栈

• 框架: Vue 3 (Composition API)
• 构建工具: Vite 5
• 样式: CSS3 + 动画效果
• 包管理: npm/pnpm/yarn

快速开始

安装依赖

npm install
# 或
pnpm install
# 或
yarn install

启动开发服务器

npm run dev

服务器将在 http://localhost:3000 启动，并自动打开浏览器。

构建生产版本

npm run build

预览生产构建

npm run preview

项目结构

robot/
├── src/
│   ├── components/
│   │   ├── charts/           # 图表组件
│   │   │   ├── KpiBarChart.vue
│   │   │   ├── KpiStackedBar.vue
│   │   │   ├── KpiDots.vue
│   │   │   └── KpiLineChart.vue
│   │   ├── TopNav.vue        # 顶部导航栏
│   │   ├── LeftColumn.vue    # 左侧 AI 洞察
│   │   ├── CenterMap.vue     # 中间园区地图
│   │   ├── RightColumn.vue   # 右侧事件流
│   │   └── BottomBar.vue     # 底部机器人状态
│   ├── App.vue               # 根组件
│   ├── main.js               # 入口文件
│   └── style.css             # 全局样式
├── index.html                # HTML 模板
├── vite.config.js            # Vite 配置
├── package.json              # 项目配置
└── README.md                 # 说明文档

核心模块

顶部导航 (TopNav)

• 系统 Logo 与标题
• 园区选择器
• 实时数据统计卡片
• 日期时间显示
• AI 助手入口

左侧列 (LeftColumn)

• AI 巡检洞察（实时告警）
• 核心 KPI 指标
  • 巡检覆盖率
  • 异常事件总数
  • 机器人健康度
  • AI 检测准确率

中间地图 (CenterMap)

• 园区态势地图
• 机器人实时位置
• 告警点标记
• AI 风险预测

右侧列 (RightColumn)

• 实时事件概览
• 活动流时间线
• 关键摄像头画面

底部栏 (BottomBar)

• 机器人集群状态
• 电量实时显示
• AI 模型性能指标

开发说明

热更新

项目支持完整的热模块替换（HMR），修改代码后浏览器会自动刷新，无需手动刷新页面。

自定义配置

可以在 vite.config.js 中修改开发服务器配置：

export default defineConfig({
  server: {
    port: 3000,        // 修改端口
    open: true,        // 自动打开浏览器
    host: true         // 允许外部访问
  }
})

样式修改

• 全局样式：src/style.css
• 组件样式：各组件的 <style scoped> 部分
• 主题色：在各组件中搜索颜色值进行修改

数据修改

所有展示数据都在各组件的 <script setup> 中定义，可以轻松修改为真实 API 数据。

截图建议

1. 浏览器全屏模式 (F11)
2. 推荐分辨率：1920×1080 或更高
3. 等待 2-3 秒让动画稳定后截图

License

MIT