专业股票交易演示平台

这是一个功能完整的专业级股票交易演示平台，采用现代化的深色主题设计，提供实时K线图和专业的交易界面体验。

🎯 核心功能

• 📊 专业K线图: 实时蜡烛图显示，包含开盘、收盘、最高、最低价
• 📈 成交量图表: 对应的成交量柱状图，红绿色区分涨跌
• 🔄 实时数据: WebSocket实时推送，每2秒更新价格
• 🎨 专业UI: 类似专业交易软件的深色主题界面
• 📱 响应式设计: 完美适配桌面和移动设备
• ⚡ 高性能: 原生JavaScript实现，无框架依赖

🛠️ 技术栈

后端

• Node.js - 运行环境
• Express.js - Web框架
• WebSocket - 实时通信
• Moment.js - 时间处理

前端

• 原生JavaScript - 核心逻辑
• Chart.js - 图表绘制
• CSS Grid/Flexbox - 响应式布局
• WebSocket API - 实时数据接收

🚀 快速开始

1. 安装依赖

cd /home/admin/Projects/trade
npm install

2. 启动服务

npm start

3. 访问应用

打开浏览器访问: http://localhost:3000

4. 开发模式

npm run dev

📱 界面展示

主要特色

• 深色主题: 专业的交易界面风格
• 实时行情: 顶部状态指示器显示连接状态
• 股票列表: 左侧显示所有股票的实时价格和涨跌
• K线图表: 专业的蜡烛图和成交量图表
• 详细面板: 显示开盘价、最高价、最低价、成交量等详细信息
• 时间周期: 支持日K、周K、月K、季K切换

📊 股票数据

包含8只热门股票的模拟数据：

• AAPL (苹果) - 科技股
• GOOGL (谷歌) - 科技股
• MSFT (微软) - 科技股
• TSLA (特斯拉) - 新能源汽车
• AMZN (亚马逊) - 电商
• BABA (阿里巴巴) - 电商
• TCEHY (腾讯) - 科技股
• JD (京东) - 电商

🎮 交互功能

股票选择

• 点击左侧股票列表查看不同股票的K线图
• 选中股票高亮显示
• 自动更新图表和详细信息

实时更新

• 每2秒自动更新股票价格
• K线图实时显示最新走势
• 涨跌用红绿色区分（绿涨红跌）

时间周期切换

• 日K：显示最近30个交易日
• 周K、月K、季K：可扩展实现
• 平滑的切换动画

📈 K线图特性

蜡烛图显示

• 绿色空心：阳线（收盘价高于开盘价）
• 红色实心：阴线（收盘价低于开盘价）
• 影线：显示最高价和最低价
• 实体：显示开盘价和收盘价区间

成交量图表

• 柱状图显示每日成交量
• 颜色与对应K线涨跌一致
• 智能格式化显示（万、亿单位）

🎨 设计特色

视觉设计

• 深色主题: 减少视觉疲劳，专业感强
• 对比鲜明: 清晰的数据可视化
• 动画效果: 流畅的过渡和悬停效果
• 响应式: 自适应不同屏幕尺寸

用户体验

• 加载状态: 优雅的加载动画
• 连接指示: 实时显示连接状态
• 错误处理: 自动重连机制
• 键盘友好: 支持键盘导航

📁 项目结构

trade/
├── package.json          # 项目配置和依赖
├── server.js             # 服务器主文件
├── README.md             # 项目说明
├── DEMO.md               # 详细演示指南
├── start.sh              # 启动脚本
├── .gitignore           # Git忽略文件
└── public/
    └── index.html        # 前端页面（22KB+专业界面）

🔧 API接口

GET /api/stocks

返回所有股票的完整数据，包括K线历史数据。

响应格式:

{
  "AAPL": {
    "name": "苹果",
    "price": 182.52,
    "change": 2.15,
    "changePercent": 1.19,
    "klineData": [
      {
        "date": "2024-01-01",
        "open": 180.00,
        "high": 183.50,
        "low": 179.20,
        "close": 182.52,
        "volume": 15000000
      }
    ]
  }
}

📡 WebSocket事件

实时数据推送

服务器每2秒推送更新的股票数据：

{
  "type": "stocks",
  "data": { ... }
}

🛠️ 自定义配置

修改更新频率

在 server.js 中修改：

// 将2000改为其他毫秒数
setInterval(() => {
  updateStockPrices();
  ws.send(JSON.stringify({ type: 'stocks', data: stockData }));
}, 2000);

添加新股票

在 server.js 的 stockData 中添加：

'NEW': { 
  name: '新股票', 
  price: 100.00, 
  change: 0.00, 
  changePercent: 0.00,
  klineData: generateKLineData(100.00)
}

自定义主题颜色

在 public/index.html 的CSS中修改颜色变量：

:root {
  --primary-color: #0969da;    /* 主要蓝色 */
  --success-color: #238636;    /* 上涨绿色 */
  --danger-color: #f85149;     /* 下跌红色 */
  --bg-primary: #0d1117;       /* 主背景色 */
  --bg-secondary: #161b22;     /* 次背景色 */
}

🚀 部署建议

PM2部署（推荐）

npm install -g pm2
pm2 start server.js --name "stock-trader"
pm2 save
pm2 startup

Docker部署

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

Nginx反向代理

server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

🔮 扩展功能

可实现的功能扩展

• 真实数据源: 集成Yahoo Finance、Alpha Vantage等API
• 技术指标: MA、MACD、RSI、布林带等
• 更多图表: 分时图、技术指标图
• 用户系统: 登录注册、个人收藏
• 模拟交易: 虚拟资金买卖功能
• 预警功能: 价格提醒、突破预警
• 数据导出: CSV格式历史数据导出

性能优化建议

• 数据缓存: Redis缓存历史数据
• CDN加速: 静态资源CDN分发
• 数据压缩: gzip压缩响应数据
• 连接池: 数据库连接池管理

📞 技术支持

如有问题或建议，欢迎：

• 提交Issue报告问题
• 提交Pull Request贡献代码
• 查看DEMO.md了解详细演示

📄 许可证

MIT License - 自由使用和修改

---

🎉 现在你拥有了一个专业级的股票交易演示平台！