> 由参赛者创作 · WorkBuddy × Tencent EdgeOne AI Prompts × Skills 挑战赛 参赛作品

## 📌 作品信息

| 字段 | 内容 |
|---|---|
| **作品名称** | OpsVision — 3D 运维监控中心 |
| **类型** | 运维监控网站（单页应用） |
| **赛道** | Prompt 参赛作品 |

---

## 📝 作品介绍

OpsVision 是一款**沉浸式 3D 数据中心运维监控大屏**。核心视觉是一片黑暗的"数据荒原"——整齐排列的机柜在微光中静默运行，每一台服务器都是一颗呼吸的脉搏。用 Three.js 渲染真实的 3D 机柜场景，用 GSAP 驱动所有视角切换和数据流动画，让运维人员仿佛置身于真实的机房指挥中心。
Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Pages.

---

## 🚀 完整 Prompt 正文

### GOAL — 基础目标

构建一个**英语版 3D 运维监控大屏单页应用**，名称为 **OpsVision**。

**设计语言：数据中心指挥台（Datacenter Command Center）**

- 黑暗沉浸（immersive dark）
- 霓虹脉搏（neon-pulsing data）
- 可交互的 3D 空间（interactive 3D space）
- 每个数字都随真实数据呼吸（living data）

---

### TECH STACK

```
HTML + CSS + Vanilla JavaScript（单文件即可）
Three.js (r128 via CDN)           ← 3D 机柜场景
GSAP 3.x (via CDN)                 ← 摄像机动画 + UI 动画
Google Fonts: Share Tech Mono + Inter
```

> 禁止使用 React/Vue 等框架，保持单文件轻量实现。

---

### BRAND — 品牌规范

**色彩体系（必须严格遵循）：**

```css
--bg-void:        #020408   /* 主背景：近乎纯黑 */
--bg-panel:       #050d14   /* 面板背景 */
--bg-card:        #071220   /* 卡片背景 */
--neon-cyan:      #00f5ff   /* 主高亮 / 正常状态 */
--neon-cyan-dim:  #00c8d4
--neon-green:     #39ff14   /* 健康指示 */
--neon-amber:     #ffb800   /* 警告状态 */
--neon-red:       #ff3b30   /* 严重告警 */
--text-primary:   #e8f4f8
--text-secondary: #7ba7bc
--text-dim:       #3d6070
```

**字体：** `Share Tech Mono`（数字/标题，等宽科技感）+ `Inter`（正文）

**禁止元素：** 白色背景、圆角卡片（>4px）、彩色渐变、扁平卡通风格

---

### LAYOUT — 布局结构

```
┌──────────────────────────────────────────────────────────┐
│  TOP BAR (56px): Logo / 标题 / 时间 / 告警数 / 系统状态  │
├──────────┬──────────────────────────┬───────────────────┤
│  LEFT    │                          │   RIGHT           │
│  (280px) │   CENTER 3D DATACENTER   │  
   (320px)         │
│          │                          │                   │
│ 服务健康  │  [机柜排列的3D场景]       │ 
   KPI指标卡         │
│ 系统仪表  │  点击机柜→放大聚焦        │ 
   请求速率折线图     │
│ 告警列表  │  点击服务器→右侧详情浮层   │ 
   地区流量条        │
│          │                          │  事件时间线       
   │
├──────────┴──────────────────────────┴───────────────────┤
│  BOTTOM (180px): CPU历史 / 内存趋势 / 网络I/O  三图并排  │
└──────────────────────────────────────────────────────────┘
```

---

### CENTER — 3D 数据中心场景（核心）

**场景描述：**
一片黑暗的地面，8 个机柜整齐排列（4×2 网格），每个机柜 1.5×4×0.8 单位。机柜门为半透明深色，内置服务器插槽，服务器正面有 3 颗 LED 指示灯（电源/状态/网络）。

**服务器数据模型：**
```javascript
{
  id: "SRV01"， slot: 3，          // 第3个槽位
  status: "healthy"，             // healthy | warning | critical
  role: "web-server"，            // web-server | db-master | cache | app
  ip: "10.0.1.12"，
  cpu: 67，                       // 0-100
  mem: 43，                       // 0-100
  temp: 52，                      // 摄氏度
  netIn: 847， netOut: 312，       // MB/s
  uptime: "47d 12h"
}
```

**三级交互导航：**

1. **OVERVIEW（总览）** — 摄像机俯视所有机柜，显示总数统计
2. **RACK（机柜视角）** — 点击某个机柜，摄像机 GSAP 推进到该机柜正前方，显示该机柜内所有服务器
3. **SERVER（服务器视角）** — 点击某台服务器，右侧滑入详情面板，显示该服务器完整信息

**摄像机控制：**
- 鼠标左键拖拽：球坐标旋转
- 鼠标滚轮：缩放（radius 2~45）
- 鼠标右键拖拽：平移
- 所有摄像机移动使用 GSAP 动画，ease: 'power3.inOut'，duration: 1.4s

**3D 渲染要点：**
- 机柜材质：深色 MeshStandardMaterial，metalness: 0.8，roughness: 0.3
- 服务器：较浅的深色材质，每个服务器内置 3 个 SphereGeometry LED 灯珠
- LED 颜色：绿色=健康，琥珀色=警告，红色闪烁=严重
- 机柜门：半透明，可透视内部服务器
- Hover：鼠标悬停时光晕强度 emissiveIntensity + 1.2
- 地面：极暗的反光平面，有微弱的网格线

**服务器详情面板（点击服务器后）：**
```
┌─────────────────────────┐
│ SRV-05  ·  web-server  
   │
│ ─────────────────────── │
│ IP        10.0.1.12     │
│ STATUS    ● HEALTHY    │
│ UPTIME    47d 12h       │
│ ─────────────────────── │
│ CPU  ████████░░░  67% 
   │
│ MEM  ████░░░░░░  43%  
   │
│ TEMP █████░░░░░  52°C  │
│ NET  ↗847  ↙312 MB/s 
   │
└─────────────────────────┘
```
面板从右侧滑入（GSAP x:20→0， opacity:0→1， duration:0.35s）

---

### TOP BAR — 顶部状态栏

```
[>_ OpsVision] [DATACENTER OPERATIONS CENTER] [11:09:52 UTC] [ALERTS 3] [OPERATIONAL]
```

- Logo：`_> OpsVision`，Share Tech Mono，青色辉光
- 时间：实时 UTC，绿色辉光，每秒更新
- 告警数：红色徽章
- 系统状态：OPERATIONAL 绿色呼吸灯 / DEGRADED 琥珀 / OUTAGE 红色

---

### LEFT PANEL — 左侧面板

**SERVICE HEALTH（8项）：**
API Gateway / Auth Service / Database / Cache / Message Queue / CDN / Storage / Search
每项右侧有状态点（绿/黄/红闪烁）和状态文字。

**SYSTEM LOAD（3个 SVG 环形仪表）：**
CPU / Memory / Disk I/O，带 GSAP 进度动画。

**RECENT ALERTS（最多6条）：**
⚠/✗/✓ 图标 + 时间戳 + 消息，critical 告警红色闪烁。

---

### RIGHT PANEL — 右侧面板

**KPI CARDS（4张）：**
- P99 Latency：142ms（绿）
- Error Rate：0.03%（绿）
- Throughput：12，847 req/s（青）
- Active Nodes：127/128（琥珀，1异常）

**REQUEST RATE SPARKLINE：**
Canvas 2D 绘制最近 60 秒折线，青色线条+半透明填充，每 2 秒刷新。

**REGION TRAFFIC：**
US-EAST / EU-WEST / AP-EAST / AP-SE / Others，水平进度条，GSAP 填充动画。

**EVENT TIMELINE：**
● 时间 + 事件描述，最新在上。

---

### BOTTOM BAR — 底部图表栏

三图并排，均使用 Canvas 2D：

| 图表 | 类型 | 颜色 |
|---|---|---|
| CPU History (60min) | 折线 | `var(--neon-cyan)` |
| Memory Trend (60min) | 面积图 | `rgba(57，255，20，0.3)` |
| Network I/O (60min) | 双线 In/Out | 青 + 橙 |

时间轴刻度：`-60m · -45m · -30m · -15m · NOW`

---

### ANIMATION — 动画规范

| 动画 | 参数 |
|---|---|
| 摄像机移动 | GSAP， ease:'power3.inOut'， duration:1.4s |
| 服务器详情面板滑入 | x:20→0， opacity:0→1， duration:0.35s， ease:'power2.out' |
| 告警闪烁 | opacity:1→0.2， repeat:-1， yoyo:true， critical:0.8s / warning:1.5s |
| 状态点闪烁 | CSS animation step-end infinite |
| 仪表盘进度 | GSAP stroke-dashoffset， duration:1.5s， ease:'power2.out' |
| 进度条填充 | width:0→value%， stagger:0.1s |
| 页面入场 | topbar/left/right panel 依次 stagger 入场 |

---

### DATA — 数据生成

所有数据在页面加载时随机生成（页面刷新数据变化）：

```javascript
// 8 个服务
const services = [
  { name: 'API Gateway'，     status: 'healthy'  }，
  { name: 'Auth Service'，    status: 'healthy'  }，
  { name: 'Database'，        status: 'warning'  }，
  { name: 'Cache (Redis)'，   status: 'healthy'  }，
  { name: 'Message Queue'，  status: 'healthy'  }，
  { name: 'CDN Edge'，        status: 'healthy'  }，
  { name: 'Object Storage'， status: 'warning'  }，
  { name: 'Search Engine'，   status: 'healthy'  }，
];

// 8 个机柜，每柜 12-18 台服务器
const rackServerData = {
  'RACK-A01': [ /* 14台服务器 */ ]，
  'RACK-A02': [ /* 16台服务器 */ ]，
  // ... 共8个机柜
};

// 告警列表
const alerts = [
  { severity: 'warning'，  ts: Date.now()-90000，  msg: 'DB latency spike > 200ms'  }，
  { severity: 'critical'， ts: Date.now()-300000， msg: 'Storage IOPS limit reached' }，
  { severity: 'info'，    ts: Date.now()-420000， msg: 'Auto-scaled: +2 instances'  }，
];

// 底部图表数据（60个时间点，每2秒一个）
// CPU/Memory/Network 数组，每项 { t: timestamp， v: 0-100 }
```

服务器状态随机分布：70% healthy，20% warning，10% critical。
CPU/Memory 数值用正弦波+随机噪声生成，有真实波动感。

---

### RESPONSIVE — 响应式

| 断点 | 布局 |
|---|---|
| 1920px+ | 三栏标准布局 |
| 1440px | 地球仪缩小至 60vh |
| 1280px | 三栏紧凑排列 |

---

> **验收标准**：页面加载后可见完整的 3D 机柜场景，可旋转/缩放，点击机柜摄像机推进，点击服务器右侧出现详情面板，所有动画流畅，数据真实感强，无报错。