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

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

项目特点

• ✨ 使用 Vue 3 + TypeScript + Vite 构建
• 🎨 炫酷的渐变背景和标题光晕效果
• 🌊 连线流动动画效果（8-12秒循环）
• 🎯 红色线条使用 #EB5017 颜色流动
• 🚫 顶部第一条虚线保持静态，其他连线均有流动效果

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

部署到网站

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

方式 1: 使用 Vercel（推荐）

1. 安装 Vercel CLI：

   npm install -g vercel
   

2. 在项目目录运行：

   cd /Users/gavin/monitor
   vercel
   

3. 按照提示操作即可完成部署

方式 2: 使用 Netlify

1. 安装 Netlify CLI：

   npm install -g netlify-cli
   

2. 部署：

   cd /Users/gavin/monitor
   netlify deploy --prod --dir=dist
   

方式 3: 使用 GitHub Pages

1. 创建 GitHub 仓库并推送代码
2. 在项目根目录创建 .github/workflows/deploy.yml
3. 配置自动部署工作流
4. 推送后自动部署到 GitHub Pages

方式 4: 上传到传统服务器

将 dist 目录下的所有文件上传到你的 Web 服务器（Apache/Nginx）的网站根目录即可。

目录结构

/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 动画