first commit

README.md

@@ -0,0 +1,94 @@
+# 火情监控全链路业务监控视图
+
+这是一个使用 Vue 3 + TypeScript 开发的监控视图展示项目，带有动态流动效果的连线动画。
+
+## 项目特点
+
+- ✨ 使用 Vue 3 + TypeScript + Vite 构建
+- 🎨 炫酷的渐变背景和标题光晕效果
+- 🌊 连线流动动画效果（8-12秒循环）
+- 🎯 红色线条使用 #EB5017 颜色流动
+- 🚫 顶部第一条虚线保持静态，其他连线均有流动效果
+
+## 本地开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# 预览生产版本
+npm run preview
+```
+
+## 部署到网站
+
+项目已构建完成，生产文件位于 `dist` 目录。
+
+### 方式 1: 使用 Vercel（推荐）
+
+1. 安装 Vercel CLI：
+   ```bash
+   npm install -g vercel
+   ```
+
+2. 在项目目录运行：
+   ```bash
+   cd /Users/gavin/monitor
+   vercel
+   ```
+
+3. 按照提示操作即可完成部署
+
+### 方式 2: 使用 Netlify
+
+1. 安装 Netlify CLI：
+   ```bash
+   npm install -g netlify-cli
+   ```
+
+2. 部署：
+   ```bash
+   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 动画