monitor/README.md

火情监控全链路业务监控视图

Vue 3 + TypeScript 开发的监控视图展示项目，带有动态流动效果的连线动画。

项目特点

• 使用 Vue 3 + TypeScript + Vite 构建
• 连线流动动画效果（8-12秒循环）
• 红色线条使用 #EB5017 颜色流动

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

部署到网站

项目已构建完成，生产文件位于 dist 目录。

目录结构

/Users/gavin/monitor/
├── dist/                 # 生产构建文件（可直接部署）
├── src/
│   ├── App.vue          # 主组件（包含动画逻辑）
│   ├── main.ts          # 入口文件
│   ├── style.css        # 全局样式
│   └── vite-env.d.ts    # TypeScript 类型定义
├── index.html           # HTML 模板
├── monitor.svg          # 监控视图 SVG 文件
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
└── vite.config.ts       # Vite 配置

技术栈

• Vue 3
• TypeScript
• Vite
• CSS3 动画