提示词效果演示：http://xhslink.com/a/QOE9DvudWcseb
# 企业级数据大屏制作要求 v2.0
## 项目概述
创建现代化企业级数据分析大屏，专注于高质量的数据可视化体验和企业级设计标准。采用模块化Bento Grid布局，支持多设备响应式适配，具备完整的交互动效系统和实时数据展示能力。
## 🎨 视觉设计标准 (v2.0)
### 1. 现代企业视觉风格
- **设计语言**：现代企业级扁平设计，注重数据可读性和视觉层次
- **布局系统**：响应式Bento Grid（12栅格系统），支持灵活的模块化组合
- **视觉原则**：
- 数据优先：内容驱动设计，避免过度装饰
- 层次清晰：合理的信息架构和视觉权重
- 一致性：统一的设计语言和交互模式
### 2. 色彩系统 (全新升级)
```css
/* v2.0 企业级色彩规范 */
:root {
/* 主色调 */
--primary-bg: #0a0a0a; /* 深邃主背景 */
--secondary-bg: #141414; /* 次要背景 */
--tertiary-bg: #1f1f1f; /* 三级背景 */
--card-bg: rgba(20,20,20,0.95); /* 卡片背景（半透明） */
/* 强调色系 */
--accent-color: #E31937; /* 特斯拉红（主强调） */
--accent-light: #ff4757; /* 亮红色（渐变） */
/* 功能色系 */
--success-color: #00d4aa; /* 成功状态 */
--warning-color: #ff9500; /* 警告状态 */
--error-color: #ff3b30; /* 错误状态 */
/* 文字色系 */
--text-primary: #ffffff; /* 主要文字 */
--text-secondary: #a0a0a0; /* 次要文字 */
--text-muted: #666666; /* 辅助文字 */
/* 边框与分割 */
--border-color: #2a2a2a; /* 默认边框 */
--border-accent: #3a3a3a; /* 强调边框 */
--glow-color: rgba(227,25,55,0.3); /* 发光效果 */
}
```
### 3. 字体系统规范
- **主字体**：Inter（现代无衬线字体，优秀的数字显示效果）
- **等宽字体**：JetBrains Mono（代码和数据显示专用）
- **字体权重**：300/400/500/600/700（合理的层次区分）
- **字体大小规范**：
```css
/* 数据显示层级 */
.counter-xl: 4rem; /* 超大数值显示 */
.counter-lg: 3rem; /* 大型数值 */
.counter-md: 2rem; /* 中型数值 */
.title-lg: 1.25rem; /* 主要标题 */
.body-text: 0.875rem; /* 正文内容 */
.caption: 0.75rem; /* 说明文字 */
```
### 4. 视觉元素设计
- **玻璃拟态卡片**：
- 20px blur backdrop-filter
- 16px border-radius
- 1px 边框配合渐变高光
- 悬浮时4px translateY变换
- **渐变系统**：
```css
/* 标准渐变模式 */
--gradient-primary: linear-gradient(135deg, var(--accent-color), var(--accent-light));
--gradient-bg: linear-gradient(135deg, var(--secondary-bg), var(--tertiary-bg));
--gradient-glow: radial-gradient(circle, var(--glow-color), transparent);
```
- **动态背景**：
- 多层次径向渐变
- 浮动网格动画（60px网格，30s周期）
- 微妙的视差效果
## 📊 数据可视化标准
### 1. 图表组件规范
- **Chart.js 3.9.1+**：标准数据可视化库
- **响应式要求**：
```javascript
// 必须配置项
options: {
responsive: true,
maintainAspectRatio: false, // 关键：适配容器
// ...其他配置
}
```
### 2. 图表容器规范
```css
.chart-container {
position: relative;
height: 300px; /* 桌面端标准高度 */
width: 100%;
}
.chart-container canvas {
max-height: 100% !important; /* 防止溢出 */
width: 100% !important;
}
/* 移动端适配 */
@media (max-width: 768px) {
.chart-container { height: 250px; }
}
```
### 3. 图表样式标准
- **雷达图**：
- 数据点大小：6px
- 边框宽度：3px
- 半透明填充：15% opacity
- 网格颜色：#2a2a2a
- **柱状图**：
- 圆角设计：6px borderRadius
- 渐变配色：主色 + 中性色对比
- 边框跳过：borderSkipped: false
- **环形图**：
- 中心留空：60% cutout
- 边框宽度：3px
- 悬浮效果：5px hoverBorderWidth
### 4. 状态指示器系统
```css
/* 状态徽章设计 */
.status-indicator {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.status-good {
background: rgba(0,212,170,0.1);
color: var(--success-color);
border: 1px solid rgba(0,212,170,0.2);
}
```
## 🎭 交互动效标准
### 1. 动画时序规范
- **页面加载**：800ms 延迟后触发计数器动画
- **数字递增**：2.5秒完整动画，60fps流畅度
- **滚动触发**：1秒 cubic-bezier(0.4,0,0.2,1) 缓动
- **悬浮反馈**：0.4秒过渡，支持硬件加速
### 2. 核心动画组件
```css
/* Fade-up 滚动动画 */
.fade-up {
opacity: 0;
transform: translateY(40px) scale(0.95);
transition: all 1s cubic-bezier(0.4,0,0.2,1);
}
.fade-up.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* 发光进度条 */
.progress-bar {
background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
box-shadow: 0 0 15px var(--glow-color);
position: relative;
overflow: hidden;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shine 3s infinite;
}
```
### 3. 交互反馈系统
- **卡片悬浮**：translateY(-4px) + 40px发光阴影
- **图标发光**：drop-shadow(0 0 8px currentColor)
- **按钮反馈**：scale(1.05) + 颜色变换
- **状态动画**：pulse呼吸灯（2秒周期）
## 🛠️ 技术实现规范
### 1. 核心技术栈
```html
```
### 2. 响应式系统
- **断点标准**：
- Mobile: 1024px（完整12栅格）
- **Bento Grid规范**：
```html
```
### 3. 性能优化要求
- **图表性能**：
```javascript
// 必须实现的优化
Chart.defaults.responsive = true;
Chart.defaults.maintainAspectRatio = false;
Chart.defaults.devicePixelRatio = window.devicePixelRatio || 1;
```
- **动画性能**：
```css
/* 硬件加速 */
.glass-card {
transform: translateZ(0);
will-change: transform, opacity;
}
```
- **内存管理**：
```javascript
// 必须实现清理机制
document.addEventListener('DOMContentLoaded', () => {
// 初始化
});
window.addEventListener('beforeunload', () => {
// 清理定时器和事件监听器
});
```
## 📱 响应式设计要求
### 1. 多设备适配标准
- **桌面端 (>1024px)**：
- 完整12栅格布局
- 图表高度：300-350px
- 卡片间距：24px
- **平板端 (768-1024px)**：
- 混合6-12栅格布局
- 图表高度：280px
- 保持数据层次
- **移动端 ( {
// 自定义响应式逻辑
}
};
```
## 💡 用户体验要求
### 1. 加载体验
- **渐进式加载**：内容 → 动画 → 图表
- **骨架屏**：数据加载时显示占位符
- **错误处理**：网络异常的友好提示
### 2. 交互体验
- **键盘支持**：
- F11：全屏切换
- Space：动画暂停/恢复
- ESC：退出全屏
- **触摸优化**：
- 44px最小触摸目标
- 滑动手势支持
- 触摸反馈效果
### 3. 可访问性
- **语义化HTML**：正确的标签使用
- **ARIA标签**：屏幕阅读器支持
- **颜色对比度**：符合WCAG 2.1 AA标准
## 🔧 代码质量标准
### 1. 代码组织
```javascript
// 推荐的代码结构
const Dashboard = {
// 配置
config: { /* 数据配置 */ },
// 初始化
init() { /* 初始化逻辑 */ },
// 动画系统
animations: {
counters() { /* 计数器动画 */ },
fadeUp() { /* 滚动动画 */ }
},
// 图表系统
charts: {
initRadar() { /* 雷达图 */ },
initBar() { /* 柱状图 */ }
},
// 工具函数
utils: { /* 通用工具 */ }
};
```
### 2. 性能监控
```javascript
// 性能度量
const performanceObserver = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log('性能指标:', entry.name, entry.duration);
});
});
performanceObserver.observe({entryTypes: ['measure']});
```
### 3. 错误处理
```javascript
// 全局错误处理
window.addEventListener('error', (e) => {
console.error('运行时错误:', e.error);
// 可选：上报错误信息
});
```
## 📋 部署与维护
### 1. 文件结构规范
```
├── index.html # 主页面（单文件架构）
├── config.js # 数据配置（可选分离）
├── assets/ # 静态资源目录
│ ├── screenshots/ # 效果截图
│ └── docs/ # 文档资料
├── README.md # 项目文档
└── 数据大屏HTML制作要求.md # 制作规范
```
### 2. 版本管理
- **语义化版本**：MAJOR.MINOR.PATCH
- **变更日志**：详细记录每次更新
- **向后兼容**：保持API稳定性
### 3. 浏览器兼容性
- **现代浏览器**：Chrome 90+, Firefox 90+, Safari 14+, Edge 90+
- **功能降级**：优雅降级策略
- **polyfill**：必要时添加兼容性支持
主要图表
辅助信息
对比图表
数据卡片
THE END
