这是一个现代化的销售数据可视化看板应用，构建于 Prompt2Repo 准入考核 项目（题目 A：动态主题仪表盘）。

使用 React + ECharts + Tailwind CSS 打造，支持 Light/Dark 主题无缝切换，提供专业的数据可视化展示。

• 🎨 现代化 UI：玻璃态效果、渐变色设计，商业级视觉体验
• 🌓 主题切换：完整的 Light/Dark 主题系统，所有组件同步响应
• 📊 数据可视化：基于 ECharts 的多种专业图表（折线图、饼图、柱状图）
• 📱 响应式设计：完美适配桌面、平板、移动端
• 🐳 Docker 交付：真正的一键部署，开箱即用
• ⚡ 高性能：Vite 构建 + Nginx 服务 + 优化加载

# 克隆项目
git clone <repository-url>
cd longmao-test-demo

# 启动服务（首次启动会自动构建镜像，需要几分钟）
docker compose up

# 或后台运行
docker compose up -d

✅ 启动成功后，浏览器访问 http://localhost:3000 即可查看销售数据看板。

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

开发服务器将在 http://localhost:5173 启动。

longmao-test-demo/
├── frontend/              ← 销售数据看板应用
│   ├── public/            ← 静态资源
│   ├── src/
│   │   ├── components/    ← React 组件
│   │   │   ├── Header.jsx           # 顶部导航栏
│   │   │   ├── ThemeToggle.jsx      # 主题切换器
│   │   │   ├── MetricCard.jsx       # 关键指标卡片
│   │   │   ├── SalesTrendChart.jsx  # 销售趋势图
│   │   │   ├── CategoryChart.jsx    # 产品分类饼图
│   │   │   ├── RegionChart.jsx      # 地区销售柱状图
│   │   │   └── TopSellers.jsx       # 销售排行榜
│   │   ├── contexts/      ← React Context
│   │   │   └── ThemeContext.jsx     # 主题上下文管理
│   │   ├── hooks/         ← 自定义 Hooks
│   │   │   └── useTheme.js          # 主题 Hook
│   │   ├── utils/         ← 工具函数
│   │   │   └── mockData.js          # 模拟数据生成
│   │   ├── App.jsx        ← 主应用组件
│   │   ├── main.jsx       ← React 入口
│   │   └── index.css      ← 全局样式
│   ├── Dockerfile         ← Docker 构建配置
│   ├── nginx.conf         ← Nginx 服务配置
│   ├── vite.config.js     ← Vite 构建配置
│   ├── tailwind.config.js ← Tailwind CSS 配置
│   ├── package.json       ← 项目依赖
│   └── README.md          ← 前端详细文档
├── docker-compose.yml     ← Docker Compose 配置
└── README.md              ← 本文件

• 📈 总销售额：实时显示年度累计销售额及增长率
• 🛒 订单总数：订单量统计及趋势
• 👥 客户总数：活跃客户数量
• 📊 转化率：平均转化率及变化

每个指标卡片都配有：

• 渐变色图标背景
• 增长率指示器
• Hover 放大效果

• 📈 双轴折线图：同时展示销售额和订单数趋势
• 📅 月度对比：12个月的数据走势
• 🎨 渐变填充：优美的区域填充效果
• 💡 交互提示：Hover 显示详细数据

• 🥧 环形饼图：展示各类产品销售占比
• 🎨 多彩配色：6种产品分类的视觉区分
• 📊 动态图例：点击切换数据展示
• ✨ 强调效果：选中区块放大显示

• 📊 渐变柱状图：蓝紫渐变柱体
• 🗺️ 6大区域：华东、华北、华南、西南、西北、东北
• 📈 数据标签：柱体顶部显示具体数值
• 🎯 对比直观：一眼看出地区差异

• 🏆 排名徽章：前三名金银铜牌设计
• 📊 多维度数据：销售额、订单数、增长率
• 📈 增长指示：上升下降箭头 + 百分比
• 🎨 Hover 效果：表格行交互高亮

• 🌞 Light 模式：明亮清新的白色主题
• 🌙 Dark 模式：优雅舒适的暗色主题
• ⚡ 流畅切换：所有组件和图表同步响应
• 💾 偏好记忆：本地存储用户选择
• 🔄 自动检测：首次访问检测系统主题偏好

采用多阶段构建优化镜像大小和安全性：

Stage 1 - Builder（构建阶段）

• 基础镜像：node:18-alpine
• 安装依赖并构建应用
• 生成优化的生产文件

Stage 2 - Production（生产阶段）

• 基础镜像：nginx:alpine
• 仅包含构建产物和 Nginx
• 最终镜像体积小，安全性高

# 查看运行状态
docker compose ps

# 查看实时日志
docker compose logs -f frontend

# 停止服务
docker compose down

# 停止并删除数据卷
docker compose down -v

# 重新构建镜像（清除缓存）
docker compose build --no-cache

# 重启服务
docker compose restart

# 进入容器调试
docker compose exec frontend sh

• ✅ Gzip 压缩：减少传输体积
• ✅ SPA 路由支持：所有路由指向 index.html
• ✅ 静态资源缓存：1年长期缓存
• ✅ 安全响应头：XSS、MIME 嗅探保护
• ✅ 健康检查：/health 端点

1. 玻璃态效果（Glassmorphism）

   • 半透明背景 + 模糊效果
   • 微妙的边框和阴影
   • 现代感十足的视觉层次

2. 渐变色系

   • 主色调：蓝色 → 紫色渐变
   • 辅助色：粉色、橙色、绿色
   • 高对比度的可读性

3. 微交互动画

   • Hover 放大效果
   • 主题切换动画
   • 卡片淡入动画
   • 图表过渡效果

4. 排版美学

   • 合理的间距系统（4px 基准）
   • 清晰的视觉层次
   • 大字号关键数据
   • 小字号辅助信息

1. 响应式布局

   • Mobile First 设计策略
   • 1/2/4 列自适应网格
   • 触摸友好的交互元素

2. 主题自适应

   • 检测系统主题偏好
   • localStorage 持久化
   • 实时同步所有组件

3. 性能优化

   • 代码分割和懒加载
   • Tree-shaking 移除未用代码
   • ECharts SVG 渲染模式
   • Nginx 静态资源优化

4. 可访问性

   • 语义化 HTML 标签
   • ARIA 标签支持
   • 键盘导航友好
   • 高对比度文本

• ✅ 打包体积：< 500KB (gzipped)
• ✅ 首屏加载：< 2s
• ✅ Tree Shaking：自动移除未使用代码
• ✅ 代码分割：按需加载组件

• ✅ FCP：< 1.5s (First Contentful Paint)
• ✅ LCP：< 2.5s (Largest Contentful Paint)
• ✅ TTI：< 3s (Time to Interactive)
• ✅ 主题切换：< 300ms

1. 克隆项目

   git clone <repository-url>
   cd longmao-test-demo/frontend

2. 安装依赖

   npm install

3. 启动开发服务器

   npm run dev

4. 构建生产版本

   npm run build

5. 预览生产版本

   npm run preview

1. 在 src/utils/mockData.js 添加数据生成函数
2. 在 src/components/ 创建新的图表组件
3. 使用 useTheme Hook 实现主题适配
4. 在 App.jsx 中引入并布局

编辑 tailwind.config.js：

theme: {
  extend: {
    colors: {
      primary: {
        light: '#3b82f6', // 自定义浅色主题主色
        dark: '#60a5fa',  // 自定义深色主题主色
      },
    },
  },
}

在各图表组件的 getOption() 方法中修改配置，参考 ECharts 文档。

问题：端口 3000 已被占用

# 修改 docker-compose.yml 中的端口映射
ports:
  - "3001:80"  # 改为其他端口

问题：构建失败

# 清除 Docker 缓存重新构建
docker compose build --no-cache
docker compose up

问题：容器无法启动

# 查看详细日志
docker compose logs frontend

# 检查 Docker 服务状态
docker info

问题：依赖安装失败

# 清除缓存重新安装
rm -rf node_modules package-lock.json
npm install

问题：端口 5173 被占用

# 修改 vite.config.js
server: {
  port: 5174  # 改为其他端口
}

• Frontend 详细文档 - 前端项目完整说明
• ECharts 官方文档 - 图表配置参考
• Tailwind CSS 文档 - 样式工具文档
• React 官方文档 - React 使用指南

MIT License - 仅用于技术演示和学习目的

本项目是 Prompt2Repo 准入考核的提交作品，使用 AI 工具（Antigravity）辅助开发，展示了：

✅ AI 驾驭能力：从架构设计到代码实现的全流程 AI 协作
✅ Docker 交付标准：完整的容器化配置，真正的一键部署
✅ 全栈审美：商业级 UI 设计，拒绝简陋界面

💡 提示：如遇问题，请确保：

• Docker 服务正常运行
• 端口 3000 未被占用
• Node.js 版本 >= 18
• 网络连接正常