# big-screen

**Repository Path**: yue7678/big-screen

## Basic Information

- **Project Name**: big-screen
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-25
- **Last Updated**: 2026-01-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BI 数据讲解：企业智能数据分析中心

基于魔珐星云3D数字人技术的智能BI数据讲解系统，能够实时解读企业业务数据指标与趋势。

## 功能特性

### 核心功能
- 🎬 **场景切换**：支持常规运营、营销推广、行业淡季3种模式
- 🤖 **AI数据生成**：使用魔搭AI (DeepSeek-V3.2) 动态生成真实业务数据
- 📊 **7大核心指标**：营业收入、订单量、毛利率、活跃用户、转化率、客单价、复购率
- 🌍 **地区数据**：华东区、华南区、华北区、西部区的营收和增长分析
- 💬 **智能对话**：AI数据洞察官根据当前数据回答业务问题
- 🔊 **语音播报**：数字人自动播报数据洞察，支持手动播报完整摘要

### UI特性
- 🎭 **数字人展示**：左侧区域，现代化卡片布局
- 📺 **大屏适配**：1920x1080设计，自动缩放
- 🎨 **渐变进度条**：40秒AI生成进度可视化
- 🔄 **视图切换**：总览、地区、对话3种视图模式

## 技术栈

### 前端
- **框架**：React 18 + TypeScript
- **构建**：Vite 5.x
- **状态管理**：Zustand
- **样式**：TailwindCSS
- **图表**：ECharts 5.x
- **HTTP**：Axios

### 后端
- **运行时**：Node.js 24.11.1
- **框架**：Express + TypeScript
- **AI模型**：魔搭社区 DeepSeek-V3.2

### 数字人
- **SDK**：魔珐星云具身驱动SDK v0.1.0-alpha.45
- **功能**：语音合成、动作控制、状态监控

## 快速开始

###环境准备

Node.js 24.11.1

npm 或 yarn

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
npm run build
npm start
```

## 密钥配置

### 配置入口
1. **首次访问自动跳转**：打开应用后，系统会自动检测密钥配置状态，未配置时将直接显示密钥配置页面
2. **重新配置方式**：如需修改密钥，点击左侧控制面板底部的「密钥配置」按钮，即可进入配置页面（原有配置会自动保留）

### 配置项说明

| 密钥 | 获取方式 | 用途 |
|------|----------|------|
| 魔搭社区 API 密钥 | [魔搭社区](https://modelscope.cn) 创建新令牌 | AI数据生成和对话 |
| 魔珐星云 App ID | [星云控制台](https://xingyun3d.com) 创建应用 | 数字人连接 |
| 魔珐星云 App Secret | 星云控制台获取 | 数字人认证 |

### 配置流程
1. **选择配置方式**：
   - 点击「使用演示密钥」按钮可立即体验完整功能
   - 或输入您从各平台获取的专属密钥

2. **验证密钥有效性**：
   - 输入密钥后，点击「测试连接」按钮验证密钥是否可用
   - 系统会检查魔搭社区和魔珐星云服务的连通性
   - 测试通过后会显示绿色验证成功提示

3. **完成配置**：
   - 验证通过后，点击「完成配置，开始使用」按钮进入应用
   - 如需要重新配置，随时点击左侧控制面板底部的「密钥配置」按钮

### 密钥管理
- **配置保留**：重新配置时，原有密钥会自动保留在输入框中，方便修改
- **安全存储**：所有密钥仅保存在您的浏览器本地存储（localStorage）中
- **数据隐私**：不会上传至任何服务器，确保您的密钥安全
- **清除配置**：可在配置页面点击「清除配置」按钮移除所有密钥

## 项目结构

```
bi-screen-speak/
├── src/
│   ├── client/                      # 前端代码
│   │   ├── components/
│   │   │   ├── Avatar/             # 数字人组件
│   │   │   │   ├── AvatarController.ts      # SDK控制器
│   │   │   │   └── AvatarContainer.tsx      # 数字人容器
│   │   │   ├── Chat/               # 对话组件
│   │   │   │   └── ChatBox.tsx              # AI对话框
│   │   │   ├── Config/             # 配置组件
│   │   │   │   └── ApiKeyConfig.tsx         # 密钥配置页
│   │   │   ├── Data/               # 数据组件
│   │   │   │   └── ScenarioSwitcher.tsx     # 场景切换器
│   │   │   ├── Dashboard/          # 大屏组件
│   │   │   │   ├── DashboardLayout.tsx      # 大屏布局
│   │   │   │   ├── MetricCard.tsx           # 指标卡片
│   │   │   │   ├── TrendChart.tsx           # 趋势图
│   │   │   │   ├── RegionalChart.tsx        # 地区图表
│   │   │   │   └── ProductChart.tsx         # 产品图表
│   │   │   └── Chart/              # 图表组件
│   │   │       └── index.ts                # 图表导出
│   │   ├── store/                      # 状态管理
│   │   │   ├── keyStore.ts              # 密钥状态
│   │   │   └── avatarStore.ts           # 数字人状态
│   │   ├── services/                   # 服务层
│   │   │   ├── keyService.ts            # 密钥管理
│   │   │   └── dataService.ts           # 数据服务
│   │   └── App.tsx                     # 主应用
│   ├── server/                      # 后端代码
│   │   ├── routes/                    # API路由
│   │   │   ├── data.routes.ts          # 数据生成接口
│   │   │   └── chat.routes.ts          # 对话接口
│   │   └── services/                  # 业务服务
│   │       ├── aiDataGenerator.ts     # AI数据生成
│   │       ├── enhancedDataGenerator.ts # 增强数据生成
│   │       └── chatService.ts         # 对话服务
│   └── shared/                      # 共享代码
├── data/                            # 数据文件
│   ├── knowledge/                   # 知识库数据
│   └── mock/                        # 模拟业务数据
└── public/                          # 静态资源
```

## API接口

### POST /api/data/generate

生成业务数据

**请求体：**
```json
{
  "scenario": "normal",
  "useAI": true,
  "previousData": { "metrics": [...] }
}
```

**响应：**
```json
{
  "success": true,
  "data": {
    "metrics": [
      {
        "name": "营业收入",
        "value": 5280000,
        "previousValue": 4800000,
        "change": 480000,
        "changePercent": 10.00,
        "unit": "元",
        "trend": "up"
      }
      // ... 共7个指标
    ],
    "trend": [
      { "timestamp": 1234567890, "value": 5000000 }
      // ... 共12个数据点
    ],
    "regionalData": [
      { "name": "华东区", "value": 1800000, "changePercent": 12.5 }
      // ... 共4个地区
    ],
    "productData": [
      { "name": "电子产品", "revenue": 2300000, "margin": 28.5, "share": 45 }
      // ... 共4个品类
    ],
    "insight": "本期业务运行平稳...",
    "suggestion": "建议持续关注核心指标...",
    "alerts": [
      { "level": "warning", "message": "毛利率低于30%" }
    ]
  },
  "source": "ai"
}
```

### POST /api/chat/stream

流式对话

**请求体：**
```json
{
  "message": "企业当前经营收入如何",
  "conversationHistory": [],
  "currentData": { ... }
}
```

**响应流：**
```
data: {"type":"content","data":"当前"}
data: {"type":"content","data":"营业收入"}
data: {"type":"end"}
```

### GET /api/data/scenarios

获取可用场景列表

## 场景说明

| 场景 | 代码 | 数据特征 |
|------|------|----------|
| 常规运营 | `normal` | 企业业务稳定发展，市场需求平稳，各项核心指标呈现良性增长态势 |
| 营销推广 | `promotion` | 企业开展全渠道营销活动，通过优惠促销、品牌合作等方式刺激市场需求 |
| 行业淡季 | `off_season` | 受季节因素和市场周期影响，行业整体需求收缩，企业通过精细化运营维持稳定 |

## 环境变量

### .env.server
```bash
PORT=5173
NODE_ENV=development
MODELSCOPE_MODEL=deepseek-ai/DeepSeek-V3.2
EMBEDDING_MODEL=Qwen/Qwen3-Embedding-8B
```

## 注意事项

1. **密钥安全**：所有密钥存储在浏览器本地，不上传到服务器
2. **AI超时**：数据生成超时时间为120秒（2分钟）
3. **数字人连接**：需要有效的网络连接到魔珐星云服务
4. **大屏适配**：设计尺寸为1920x1080，自动缩放适配不同屏幕
5. **数据精度**：所有百分比保留2位小数

## 开发说明

### 数据生成流程
1. 用户选择场景
2. 前端调用 `/api/data/generate`
3. 后端使用魔搭AI生成数据（超时120秒）
4. AI失败时自动降级到增强生成器
5. 返回完整数据（7指标+地区+产品+洞察+建议+预警）

### 对话功能流程
1. 用户输入问题
2. 后端构建包含当前数据的系统提示词
3. 使用DeepSeek-V3.2流式生成回复
4. 支持降级响应（关键词匹配）

### 数字人播报
1. 数据生成完成后自动播报洞察
2. 支持手动点击"开始播报"按钮
3. 播报内容：4核心指标 + 最多2条预警 + 洞察 + 建议

## 许可证

MIT License

---

**魔珐星云黑客松作品**