commit
a8a84c00da
@ -0,0 +1,255 @@
|
|||||||
|
# 智能期货期权分析系统 - 功能实现总结
|
||||||
|
|
||||||
|
## 📋 已完成的功能
|
||||||
|
|
||||||
|
### 1. 后端服务 (NestJS + TypeScript)
|
||||||
|
|
||||||
|
#### ✅ 基础架构
|
||||||
|
- 模块化项目结构，易于扩展
|
||||||
|
- 全局异常处理、日志记录
|
||||||
|
- API限流保护
|
||||||
|
- Swagger API文档自动生成
|
||||||
|
- JWT认证与授权
|
||||||
|
|
||||||
|
#### ✅ 数据库设计 (Prisma)
|
||||||
|
- 用户系统
|
||||||
|
- 期货品种管理
|
||||||
|
- K线数据存储
|
||||||
|
- 实时Tick数据缓存
|
||||||
|
- 热点事件管理
|
||||||
|
- 自选股功能
|
||||||
|
- 价格预警系统
|
||||||
|
- 期权合约管理
|
||||||
|
|
||||||
|
#### ✅ 用户认证系统
|
||||||
|
- 用户注册/登录/登出
|
||||||
|
- JWT Token认证
|
||||||
|
- 密码加密存储
|
||||||
|
- 用户信息管理
|
||||||
|
|
||||||
|
#### ✅ 行情数据服务
|
||||||
|
- RESTful API获取品种列表、K线数据、实时行情
|
||||||
|
- WebSocket实时推送Tick数据
|
||||||
|
- 市场概览数据聚合
|
||||||
|
- Redis缓存加速
|
||||||
|
|
||||||
|
#### ✅ 技术指标计算引擎
|
||||||
|
- MACD (异同移动平均线)
|
||||||
|
- RSI (相对强弱指标)
|
||||||
|
- KDJ (随机指标)
|
||||||
|
- BOLL (布林带)
|
||||||
|
- SAR (抛物线转向)
|
||||||
|
- OBV (能量潮)
|
||||||
|
- DMI (趋向指标)
|
||||||
|
- CCI (商品通道指数)
|
||||||
|
- WR (威廉指标)
|
||||||
|
- 移动平均线 (MA5/MA10/MA20/MA60)
|
||||||
|
|
||||||
|
#### ✅ 期权分析模块
|
||||||
|
- Black-Scholes期权定价模型
|
||||||
|
- 希腊值计算 (Delta, Gamma, Theta, Vega, Rho)
|
||||||
|
- 隐含波动率计算
|
||||||
|
- 期权链数据生成
|
||||||
|
- 波动率曲面分析
|
||||||
|
- 期权策略盈亏计算
|
||||||
|
|
||||||
|
#### ✅ AI智能分析模块
|
||||||
|
- 集成OpenAI API进行智能分析
|
||||||
|
- 基于规则的技术面分析 (Fallback)
|
||||||
|
- 趋势判断和交易建议
|
||||||
|
- 支撑阻力位计算
|
||||||
|
- 风险评估
|
||||||
|
|
||||||
|
#### ✅ 业务功能
|
||||||
|
- 热点事件管理 (增删改查)
|
||||||
|
- 自选股功能 (增删改查、价格预警)
|
||||||
|
- 价格预警系统 (定时检查、触发通知)
|
||||||
|
|
||||||
|
### 2. 前端API服务
|
||||||
|
|
||||||
|
#### ✅ HTTP客户端封装
|
||||||
|
- Axios拦截器统一处理
|
||||||
|
- Token自动注入
|
||||||
|
- 统一错误处理
|
||||||
|
- API模块化组织
|
||||||
|
|
||||||
|
#### ✅ WebSocket客户端
|
||||||
|
- Socket.io连接管理
|
||||||
|
- 自动重连机制
|
||||||
|
- 订阅/取消订阅
|
||||||
|
- 事件监听封装
|
||||||
|
|
||||||
|
### 3. 部署配置
|
||||||
|
|
||||||
|
#### ✅ Docker支持
|
||||||
|
- 前端Dockerfile (Nginx)
|
||||||
|
- 后端Dockerfile (Node.js)
|
||||||
|
- Docker Compose编排
|
||||||
|
- 健康检查配置
|
||||||
|
|
||||||
|
#### ✅ 环境配置
|
||||||
|
- 环境变量模板
|
||||||
|
- 多环境支持 (dev/prod)
|
||||||
|
- 数据库迁移脚本
|
||||||
|
- 种子数据导入
|
||||||
|
|
||||||
|
## 📁 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
AlphaFuturesProMax/
|
||||||
|
├── app/ # 前端应用
|
||||||
|
│ ├── src/
|
||||||
|
│ │ ├── components/ # UI组件
|
||||||
|
│ │ ├── services/ # API和WebSocket服务
|
||||||
|
│ │ │ ├── api.ts # HTTP API封装
|
||||||
|
│ │ │ └── websocket.ts # WebSocket服务
|
||||||
|
│ │ └── ...
|
||||||
|
│ ├── Dockerfile # 前端Docker配置
|
||||||
|
│ └── nginx.conf # Nginx配置
|
||||||
|
│
|
||||||
|
├── app/server/ # 后端服务
|
||||||
|
│ ├── src/
|
||||||
|
│ │ ├── auth/ # 认证模块
|
||||||
|
│ │ ├── market/ # 行情数据模块
|
||||||
|
│ │ ├── indicators/ # 技术指标模块
|
||||||
|
│ │ ├── options/ # 期权分析模块
|
||||||
|
│ │ ├── ai/ # AI分析模块
|
||||||
|
│ │ ├── events/ # 热点事件模块
|
||||||
|
│ │ ├── watchlist/ # 自选股模块
|
||||||
|
│ │ ├── alert/ # 价格预警模块
|
||||||
|
│ │ ├── user/ # 用户模块
|
||||||
|
│ │ ├── common/ # 公共模块
|
||||||
|
│ │ │ ├── prisma/ # Prisma服务
|
||||||
|
│ │ │ └── redis/ # Redis服务
|
||||||
|
│ │ └── config/ # 配置文件
|
||||||
|
│ ├── prisma/
|
||||||
|
│ │ ├── schema.prisma # 数据库模型
|
||||||
|
│ │ └── seed.ts # 种子数据
|
||||||
|
│ ├── Dockerfile # 后端Docker配置
|
||||||
|
│ └── package.json
|
||||||
|
│
|
||||||
|
├── docker-compose.yml # Docker编排配置
|
||||||
|
├── DEPLOY.md # 部署文档
|
||||||
|
└── docs/ # 项目文档
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 快速启动
|
||||||
|
|
||||||
|
### Docker方式 (推荐)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. 启动所有服务
|
||||||
|
docker-compose up -d
|
||||||
|
|
||||||
|
# 2. 查看服务状态
|
||||||
|
docker-compose ps
|
||||||
|
|
||||||
|
# 3. 查看日志
|
||||||
|
docker-compose logs -f backend
|
||||||
|
|
||||||
|
# 4. 访问应用
|
||||||
|
# 前端: http://localhost
|
||||||
|
# API: http://localhost:3000/api/v1
|
||||||
|
# 文档: http://localhost:3000/docs
|
||||||
|
```
|
||||||
|
|
||||||
|
### 手动部署
|
||||||
|
|
||||||
|
见 `DEPLOY.md` 详细说明
|
||||||
|
|
||||||
|
## 📡 API接口
|
||||||
|
|
||||||
|
### 认证接口
|
||||||
|
- `POST /api/v1/auth/register` - 注册
|
||||||
|
- `POST /api/v1/auth/login` - 登录
|
||||||
|
- `POST /api/v1/auth/logout` - 登出
|
||||||
|
- `GET /api/v1/auth/profile` - 获取用户信息
|
||||||
|
|
||||||
|
### 行情接口
|
||||||
|
- `GET /api/v1/market/products` - 品种列表
|
||||||
|
- `GET /api/v1/market/products/:symbol` - 品种详情
|
||||||
|
- `GET /api/v1/market/products/:symbol/kline` - K线数据
|
||||||
|
- `GET /api/v1/market/products/:symbol/tick` - 实时行情
|
||||||
|
- `GET /api/v1/market/overview` - 市场概览
|
||||||
|
|
||||||
|
### 技术指标接口
|
||||||
|
- `GET /api/v1/indicators/:symbol` - 所有指标
|
||||||
|
- `GET /api/v1/indicators/:symbol/macd` - MACD
|
||||||
|
- `GET /api/v1/indicators/:symbol/rsi` - RSI
|
||||||
|
- `GET /api/v1/indicators/:symbol/bollinger` - 布林带
|
||||||
|
- `GET /api/v1/indicators/:symbol/kdj` - KDJ
|
||||||
|
|
||||||
|
### 期权接口
|
||||||
|
- `POST /api/v1/options/pricing` - 期权定价
|
||||||
|
- `GET /api/v1/options/chain/:underlying` - 期权链
|
||||||
|
- `GET /api/v1/options/volatility-surface/:underlying` - 波动率曲面
|
||||||
|
- `POST /api/v1/options/strategy/payoff` - 策略盈亏
|
||||||
|
|
||||||
|
### AI分析接口
|
||||||
|
- `GET /api/v1/ai/analyze/:symbol` - AI分析品种
|
||||||
|
|
||||||
|
### 事件接口
|
||||||
|
- `GET /api/v1/events` - 热点事件列表
|
||||||
|
- `GET /api/v1/events/:id` - 事件详情
|
||||||
|
|
||||||
|
### WebSocket
|
||||||
|
- `ws://localhost:3000/market` - 行情实时推送
|
||||||
|
|
||||||
|
## 🔧 扩展建议
|
||||||
|
|
||||||
|
### 数据源接入
|
||||||
|
目前使用模拟数据，可接入真实数据源：
|
||||||
|
- Wind金融终端API
|
||||||
|
- 同花顺iFinD API
|
||||||
|
- 交易所官方API
|
||||||
|
|
||||||
|
实现方式：
|
||||||
|
1. 在 `market-data-feed.service.ts` 中实现新的数据源适配器
|
||||||
|
2. 修改配置 `MARKET_DATA_PROVIDER`
|
||||||
|
|
||||||
|
### 新增技术指标
|
||||||
|
在 `indicators.service.ts` 中添加新的计算方法：
|
||||||
|
```typescript
|
||||||
|
calculateNewIndicator(klineData: KLineData[], params: any): Result[] {
|
||||||
|
// 实现计算逻辑
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 新增期权模型
|
||||||
|
在 `options.service.ts` 中添加新的定价模型：
|
||||||
|
```typescript
|
||||||
|
calculateBinomialModel(S: number, K: number, ...): OptionPricingResult {
|
||||||
|
// 实现二叉树模型
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📊 性能优化
|
||||||
|
|
||||||
|
### 已实现
|
||||||
|
- Redis缓存加速
|
||||||
|
- WebSocket实时推送
|
||||||
|
- API响应压缩
|
||||||
|
- 数据库索引优化
|
||||||
|
|
||||||
|
### 建议优化
|
||||||
|
- 数据库读写分离
|
||||||
|
- API限流
|
||||||
|
- 静态资源CDN
|
||||||
|
- 应用监控 (Prometheus + Grafana)
|
||||||
|
|
||||||
|
## 🛡️ 安全建议
|
||||||
|
|
||||||
|
1. 生产环境必须修改JWT密钥
|
||||||
|
2. 启用HTTPS
|
||||||
|
3. 配置CORS白名单
|
||||||
|
4. 数据库使用强密码
|
||||||
|
5. 定期更新依赖包
|
||||||
|
|
||||||
|
## 📝 待实现功能
|
||||||
|
|
||||||
|
- [ ] 交易信号系统 (多指标共振)
|
||||||
|
- [ ] 量化策略回测引擎
|
||||||
|
- [ ] 移动端APP (React Native/Flutter)
|
||||||
|
- [ ] 管理后台
|
||||||
|
- [ ] 会员系统
|
||||||
|
- [ ] 模拟交易功能
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
# 前端构建
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 复制package文件
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
# 复制源代码
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# 构建生产版本
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Nginx服务
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
# 复制构建产物
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# 复制nginx配置
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# 暴露端口
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
# 启动nginx
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## React Compiler
|
||||||
|
|
||||||
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
|
||||||
|
// Remove tseslint.configs.recommended and replace with this
|
||||||
|
tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
tseslint.configs.stylisticTypeChecked,
|
||||||
|
|
||||||
|
// Other configs...
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
// Enable lint rules for React
|
||||||
|
reactX.configs['recommended-typescript'],
|
||||||
|
// Enable lint rules for React DOM
|
||||||
|
reactDom.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "postcss.config.js",
|
||||||
|
"css": "src/index.css",
|
||||||
|
"baseColor": "slate",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>智能期货期权分析系统</title>
|
||||||
|
<script type="module" crossorigin src="./assets/index-BYfknKCx.js"></script>
|
||||||
|
<link rel="stylesheet" crossorigin href="./assets/index-BYX1qVyV.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>智能期货期权分析系统</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
Using Node.js 20, Tailwind CSS v3.4.19, and Vite v7.2.4
|
||||||
|
|
||||||
|
Tailwind CSS has been set up with the shadcn theme
|
||||||
|
|
||||||
|
Setup complete: /mnt/okcomputer/output/app
|
||||||
|
|
||||||
|
Components (40+):
|
||||||
|
accordion, alert-dialog, alert, aspect-ratio, avatar, badge, breadcrumb,
|
||||||
|
button-group, button, calendar, card, carousel, chart, checkbox, collapsible,
|
||||||
|
command, context-menu, dialog, drawer, dropdown-menu, empty, field, form,
|
||||||
|
hover-card, input-group, input-otp, input, item, kbd, label, menubar,
|
||||||
|
navigation-menu, pagination, popover, progress, radio-group, resizable,
|
||||||
|
scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner,
|
||||||
|
spinner, switch, table, tabs, textarea, toggle-group, toggle, tooltip
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Card, CardHeader, CardTitle } from '@/components/ui/card'
|
||||||
|
|
||||||
|
Structure:
|
||||||
|
src/sections/ Page sections
|
||||||
|
src/hooks/ Custom hooks
|
||||||
|
src/types/ Type definitions
|
||||||
|
src/App.css Styles specific to the Webapp
|
||||||
|
src/App.tsx Root React component
|
||||||
|
src/index.css Global styles
|
||||||
|
src/main.tsx Entry point for rendering the Webapp
|
||||||
|
index.html Entry point for the Webapp
|
||||||
|
tailwind.config.js Configures Tailwind's theme, plugins, etc.
|
||||||
|
vite.config.ts Main build and dev server settings for Vite
|
||||||
|
postcss.config.js Config file for CSS post-processing tools
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Gzip压缩
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_min_length 1024;
|
||||||
|
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
||||||
|
|
||||||
|
# 缓存静态资源
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
add_header X-Content-Type-Options "nosniff";
|
||||||
|
}
|
||||||
|
|
||||||
|
# API代理
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://backend:3000/api/;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection 'upgrade';
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_cache_bypass $http_upgrade;
|
||||||
|
proxy_read_timeout 86400;
|
||||||
|
}
|
||||||
|
|
||||||
|
# WebSocket代理
|
||||||
|
location /socket.io/ {
|
||||||
|
proxy_pass http://backend:3000/socket.io/;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Upgrade $http_upgrade;
|
||||||
|
proxy_set_header Connection "upgrade";
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
proxy_read_timeout 86400;
|
||||||
|
}
|
||||||
|
|
||||||
|
# 前端路由
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
add_header Cache-Control "no-cache";
|
||||||
|
}
|
||||||
|
|
||||||
|
# 健康检查
|
||||||
|
location /health {
|
||||||
|
access_log off;
|
||||||
|
return 200 "healthy\n";
|
||||||
|
add_header Content-Type text/plain;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,82 @@
|
|||||||
|
{
|
||||||
|
"name": "my-app",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^5.2.2",
|
||||||
|
"axios": "^1.6.5",
|
||||||
|
"socket.io-client": "^4.7.4",
|
||||||
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-aspect-ratio": "^1.1.8",
|
||||||
|
"@radix-ui/react-avatar": "^1.1.11",
|
||||||
|
"@radix-ui/react-checkbox": "^1.3.3",
|
||||||
|
"@radix-ui/react-collapsible": "^1.1.12",
|
||||||
|
"@radix-ui/react-context-menu": "^2.2.16",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.15",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||||
|
"@radix-ui/react-hover-card": "^1.1.15",
|
||||||
|
"@radix-ui/react-label": "^2.1.8",
|
||||||
|
"@radix-ui/react-menubar": "^1.1.16",
|
||||||
|
"@radix-ui/react-navigation-menu": "^1.2.14",
|
||||||
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
|
"@radix-ui/react-progress": "^1.1.8",
|
||||||
|
"@radix-ui/react-radio-group": "^1.3.8",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||||
|
"@radix-ui/react-select": "^2.2.6",
|
||||||
|
"@radix-ui/react-separator": "^1.1.8",
|
||||||
|
"@radix-ui/react-slider": "^1.3.6",
|
||||||
|
"@radix-ui/react-slot": "^1.2.4",
|
||||||
|
"@radix-ui/react-switch": "^1.2.6",
|
||||||
|
"@radix-ui/react-tabs": "^1.1.13",
|
||||||
|
"@radix-ui/react-toggle": "^1.1.10",
|
||||||
|
"@radix-ui/react-toggle-group": "^1.1.11",
|
||||||
|
"@radix-ui/react-tooltip": "^1.2.8",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "^1.1.1",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"echarts": "^5.4.3",
|
||||||
|
"embla-carousel-react": "^8.6.0",
|
||||||
|
"input-otp": "^1.4.2",
|
||||||
|
"lucide-react": "^0.562.0",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-day-picker": "^9.13.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-hook-form": "^7.70.0",
|
||||||
|
"react-resizable-panels": "^4.2.2",
|
||||||
|
"recharts": "^2.15.4",
|
||||||
|
"sonner": "^2.0.7",
|
||||||
|
"tailwind-merge": "^3.4.0",
|
||||||
|
"vaul": "^1.1.2",
|
||||||
|
"zod": "^4.3.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.1",
|
||||||
|
"@types/node": "^24.10.1",
|
||||||
|
"@types/react": "^19.2.5",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^5.1.1",
|
||||||
|
"autoprefixer": "^10.4.23",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
|
"globals": "^16.5.0",
|
||||||
|
"kimi-plugin-inspect-react": "^1.0.3",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^3.4.19",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.46.4",
|
||||||
|
"vite": "^7.2.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
# 应用配置
|
||||||
|
NODE_ENV=development
|
||||||
|
PORT=3000
|
||||||
|
API_PREFIX=/api/v1
|
||||||
|
|
||||||
|
# 数据库配置
|
||||||
|
DATABASE_URL=postgresql://user:password@localhost:5432/futures_analysis?schema=public
|
||||||
|
|
||||||
|
# Redis配置
|
||||||
|
REDIS_URL=redis://localhost:6379
|
||||||
|
REDIS_PASSWORD=
|
||||||
|
|
||||||
|
# JWT配置
|
||||||
|
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
|
||||||
|
JWT_EXPIRES_IN=1h
|
||||||
|
JWT_REFRESH_EXPIRES_IN=7d
|
||||||
|
|
||||||
|
# 行情数据源配置
|
||||||
|
MARKET_DATA_PROVIDER=mock
|
||||||
|
MARKET_DATA_API_KEY=
|
||||||
|
MARKET_DATA_API_SECRET=
|
||||||
|
MARKET_DATA_WS_URL=
|
||||||
|
|
||||||
|
# OpenAI配置 (用于AI分析)
|
||||||
|
OPENAI_API_KEY=
|
||||||
|
OPENAI_BASE_URL=
|
||||||
|
OPENAI_MODEL=gpt-4-turbo-preview
|
||||||
|
|
||||||
|
# 邮件配置
|
||||||
|
SMTP_HOST=
|
||||||
|
SMTP_PORT=587
|
||||||
|
SMTP_USER=
|
||||||
|
SMTP_PASS=
|
||||||
|
SMTP_FROM=
|
||||||
|
|
||||||
|
# 日志配置
|
||||||
|
LOG_LEVEL=debug
|
||||||
|
LOG_FILE=logs/app.log
|
||||||
|
|
||||||
|
# 安全配置
|
||||||
|
CORS_ORIGIN=http://localhost:5173
|
||||||
|
RATE_LIMIT_WINDOW_MS=60000
|
||||||
|
RATE_LIMIT_MAX_REQUESTS=100
|
||||||
|
|
||||||
|
# 监控配置
|
||||||
|
METRICS_ENABLED=true
|
||||||
|
METRICS_PORT=9090
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
# 应用配置
|
||||||
|
NODE_ENV=development
|
||||||
|
PORT=3000
|
||||||
|
API_PREFIX=/api/v1
|
||||||
|
|
||||||
|
# 数据库配置
|
||||||
|
DATABASE_URL=postgresql://user:password@localhost:5432/futures_analysis?schema=public
|
||||||
|
|
||||||
|
# Redis配置
|
||||||
|
REDIS_URL=redis://localhost:6379
|
||||||
|
REDIS_PASSWORD=
|
||||||
|
|
||||||
|
# JWT配置
|
||||||
|
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
|
||||||
|
JWT_EXPIRES_IN=1h
|
||||||
|
JWT_REFRESH_EXPIRES_IN=7d
|
||||||
|
|
||||||
|
# 行情数据源配置
|
||||||
|
MARKET_DATA_PROVIDER=mock
|
||||||
|
MARKET_DATA_API_KEY=
|
||||||
|
MARKET_DATA_API_SECRET=
|
||||||
|
MARKET_DATA_WS_URL=
|
||||||
|
|
||||||
|
# OpenAI配置 (用于AI分析)
|
||||||
|
OPENAI_API_KEY=
|
||||||
|
OPENAI_BASE_URL=
|
||||||
|
OPENAI_MODEL=gpt-4-turbo-preview
|
||||||
|
|
||||||
|
# 邮件配置
|
||||||
|
SMTP_HOST=
|
||||||
|
SMTP_PORT=587
|
||||||
|
SMTP_USER=
|
||||||
|
SMTP_PASS=
|
||||||
|
SMTP_FROM=
|
||||||
|
|
||||||
|
# 日志配置
|
||||||
|
LOG_LEVEL=debug
|
||||||
|
LOG_FILE=logs/app.log
|
||||||
|
|
||||||
|
# 安全配置
|
||||||
|
CORS_ORIGIN=http://localhost:5173
|
||||||
|
RATE_LIMIT_WINDOW_MS=60000
|
||||||
|
RATE_LIMIT_MAX_REQUESTS=100
|
||||||
|
|
||||||
|
# 监控配置
|
||||||
|
METRICS_ENABLED=true
|
||||||
|
METRICS_PORT=9090
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
# 构建阶段
|
||||||
|
FROM node:20-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 复制package文件
|
||||||
|
COPY package*.json ./
|
||||||
|
COPY prisma ./prisma/
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
# 复制源代码
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# 生成Prisma客户端
|
||||||
|
RUN npx prisma generate
|
||||||
|
|
||||||
|
# 构建应用
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# 生产阶段
|
||||||
|
FROM node:20-alpine
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 安装生产依赖和必要库
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm install --omit=dev && npm cache clean --force
|
||||||
|
|
||||||
|
# 复制构建产物
|
||||||
|
COPY --from=builder /app/dist ./dist
|
||||||
|
COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
|
||||||
|
COPY --from=builder /app/prisma ./prisma
|
||||||
|
|
||||||
|
# 暴露端口
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
# 健康检查
|
||||||
|
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||||
|
CMD node -e "require('http').get('http://localhost:3000/api/v1/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"
|
||||||
|
|
||||||
|
# 启动命令 - 先安装openssl再启动
|
||||||
|
CMD ["sh", "-c", "apk add --no-cache openssl1.1-compat 2>/dev/null || apk add --no-cache openssl; node dist/src/main.js"]
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/nest-cli",
|
||||||
|
"collection": "@nestjs/schematics",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"compilerOptions": {
|
||||||
|
"deleteOutDir": true,
|
||||||
|
"webpack": false
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,103 @@
|
|||||||
|
{
|
||||||
|
"name": "futures-analysis-server",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "智能期货期权分析系统 - 后端服务",
|
||||||
|
"author": "AlphaFutures Team",
|
||||||
|
"private": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"build": "nest build",
|
||||||
|
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
|
||||||
|
"start": "nest start",
|
||||||
|
"start:dev": "nest start --watch",
|
||||||
|
"start:debug": "nest start --debug --watch",
|
||||||
|
"start:prod": "node dist/main",
|
||||||
|
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
|
||||||
|
"test": "jest",
|
||||||
|
"test:watch": "jest --watch",
|
||||||
|
"test:cov": "jest --coverage",
|
||||||
|
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
|
||||||
|
"test:e2e": "jest --config ./test/jest-e2e.json",
|
||||||
|
"db:generate": "prisma generate",
|
||||||
|
"db:migrate": "prisma migrate dev",
|
||||||
|
"db:deploy": "prisma migrate deploy",
|
||||||
|
"db:studio": "prisma studio",
|
||||||
|
"db:seed": "ts-node prisma/seed.ts"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@nestjs/common": "^10.3.0",
|
||||||
|
"@nestjs/config": "^3.1.1",
|
||||||
|
"@nestjs/core": "^10.3.0",
|
||||||
|
"@nestjs/jwt": "^10.2.0",
|
||||||
|
"@nestjs/passport": "^10.0.3",
|
||||||
|
"@nestjs/platform-express": "^10.3.0",
|
||||||
|
"@nestjs/platform-socket.io": "^10.3.0",
|
||||||
|
"@nestjs/schedule": "^4.0.0",
|
||||||
|
"@nestjs/swagger": "^7.3.0",
|
||||||
|
"@nestjs/throttler": "^5.1.1",
|
||||||
|
"@nestjs/websockets": "^10.3.0",
|
||||||
|
"@prisma/client": "^5.9.0",
|
||||||
|
"bcrypt": "^5.1.1",
|
||||||
|
"class-transformer": "^0.5.1",
|
||||||
|
"class-validator": "^0.14.1",
|
||||||
|
"compression": "^1.7.4",
|
||||||
|
"helmet": "^7.1.0",
|
||||||
|
"ioredis": "^5.3.2",
|
||||||
|
"openai": "^4.28.0",
|
||||||
|
"passport": "^0.7.0",
|
||||||
|
"passport-jwt": "^4.0.1",
|
||||||
|
"reflect-metadata": "^0.2.1",
|
||||||
|
"rxjs": "^7.8.1",
|
||||||
|
"uuid": "^9.0.1",
|
||||||
|
"ws": "^8.16.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@nestjs/cli": "^10.3.0",
|
||||||
|
"@nestjs/schematics": "^10.1.0",
|
||||||
|
"@nestjs/testing": "^10.3.0",
|
||||||
|
"@types/bcrypt": "^5.0.2",
|
||||||
|
"@types/compression": "^1.7.5",
|
||||||
|
"@types/express": "^4.17.21",
|
||||||
|
"@types/jest": "^29.5.11",
|
||||||
|
"@types/node": "^20.11.5",
|
||||||
|
"@types/passport-jwt": "^4.0.0",
|
||||||
|
"@types/supertest": "^6.0.2",
|
||||||
|
"@types/uuid": "^9.0.7",
|
||||||
|
"@types/ws": "^8.5.10",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.19.1",
|
||||||
|
"@typescript-eslint/parser": "^6.19.1",
|
||||||
|
"eslint": "^8.56.0",
|
||||||
|
"eslint-config-prettier": "^9.1.0",
|
||||||
|
"eslint-plugin-prettier": "^5.1.3",
|
||||||
|
"jest": "^29.7.0",
|
||||||
|
"prettier": "^3.2.4",
|
||||||
|
"prisma": "^5.9.0",
|
||||||
|
"source-map-support": "^0.5.21",
|
||||||
|
"supertest": "^6.3.4",
|
||||||
|
"ts-jest": "^29.1.1",
|
||||||
|
"ts-loader": "^9.5.1",
|
||||||
|
"ts-node": "^10.9.2",
|
||||||
|
"tsconfig-paths": "^4.2.0",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
|
},
|
||||||
|
"jest": {
|
||||||
|
"moduleFileExtensions": [
|
||||||
|
"js",
|
||||||
|
"json",
|
||||||
|
"ts"
|
||||||
|
],
|
||||||
|
"rootDir": "src",
|
||||||
|
"testRegex": ".*\\.spec\\.ts$",
|
||||||
|
"transform": {
|
||||||
|
"^.+\\.(t|j)s$": "ts-jest"
|
||||||
|
},
|
||||||
|
"collectCoverageFrom": [
|
||||||
|
"**/*.(t|j)s"
|
||||||
|
],
|
||||||
|
"coverageDirectory": "../coverage",
|
||||||
|
"testEnvironment": "node"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,265 @@
|
|||||||
|
generator client {
|
||||||
|
provider = "prisma-client-js"
|
||||||
|
binaryTargets = ["native", "linux-musl-openssl-3.0.x"]
|
||||||
|
}
|
||||||
|
|
||||||
|
datasource db {
|
||||||
|
provider = "postgresql"
|
||||||
|
url = env("DATABASE_URL")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户表
|
||||||
|
model User {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
username String @unique @db.VarChar(50)
|
||||||
|
email String @unique @db.VarChar(100)
|
||||||
|
passwordHash String @map("password_hash") @db.VarChar(255)
|
||||||
|
phone String? @db.VarChar(20)
|
||||||
|
avatarUrl String? @map("avatar_url") @db.VarChar(255)
|
||||||
|
membershipLevel Int @default(0) @map("membership_level")
|
||||||
|
isActive Boolean @default(true) @map("is_active")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
updatedAt DateTime @updatedAt @map("updated_at")
|
||||||
|
|
||||||
|
// 关联
|
||||||
|
watchlist Watchlist[]
|
||||||
|
priceAlerts PriceAlert[]
|
||||||
|
paperTrades PaperTrade[]
|
||||||
|
sessions UserSession[]
|
||||||
|
|
||||||
|
@@map("users")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户会话表
|
||||||
|
model UserSession {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
userId Int @map("user_id")
|
||||||
|
token String @unique @db.VarChar(500)
|
||||||
|
expiresAt DateTime @map("expires_at")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@index([token])
|
||||||
|
@@map("user_sessions")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 期货品种表
|
||||||
|
model Product {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
symbol String @unique @db.VarChar(20)
|
||||||
|
name String @db.VarChar(100)
|
||||||
|
category String @db.VarChar(50)
|
||||||
|
exchange String? @db.VarChar(50)
|
||||||
|
unit String? @db.VarChar(20)
|
||||||
|
minChange Decimal? @map("min_change") @db.Decimal(10, 4)
|
||||||
|
description String? @db.Text
|
||||||
|
isActive Boolean @default(true) @map("is_active")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
// 关联
|
||||||
|
klineData KlineData[]
|
||||||
|
tickData TickData[]
|
||||||
|
events EventProduct[]
|
||||||
|
signals TradingSignal[]
|
||||||
|
options OptionContract[]
|
||||||
|
|
||||||
|
@@map("products")
|
||||||
|
}
|
||||||
|
|
||||||
|
// K线数据表
|
||||||
|
model KlineData {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
productId Int @map("product_id")
|
||||||
|
period String @db.VarChar(10) // 1m, 5m, 15m, 30m, 1h, 1d, 1w
|
||||||
|
time DateTime
|
||||||
|
open Decimal @db.Decimal(18, 6)
|
||||||
|
high Decimal @db.Decimal(18, 6)
|
||||||
|
low Decimal @db.Decimal(18, 6)
|
||||||
|
close Decimal @db.Decimal(18, 6)
|
||||||
|
volume BigInt
|
||||||
|
openInterest BigInt? @map("open_interest")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@unique([productId, period, time])
|
||||||
|
@@index([productId, period, time])
|
||||||
|
@@map("kline_data")
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tick实时数据表
|
||||||
|
model TickData {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
productId Int @map("product_id")
|
||||||
|
price Decimal @db.Decimal(18, 6)
|
||||||
|
change Decimal @db.Decimal(18, 6)
|
||||||
|
changePercent Decimal @map("change_percent") @db.Decimal(10, 4)
|
||||||
|
open Decimal @db.Decimal(18, 6)
|
||||||
|
high Decimal @db.Decimal(18, 6)
|
||||||
|
low Decimal @db.Decimal(18, 6)
|
||||||
|
volume BigInt
|
||||||
|
openInterest BigInt? @map("open_interest")
|
||||||
|
bidPrice Decimal? @map("bid_price") @db.Decimal(18, 6)
|
||||||
|
askPrice Decimal? @map("ask_price") @db.Decimal(18, 6)
|
||||||
|
bidVolume BigInt? @map("bid_volume")
|
||||||
|
askVolume BigInt? @map("ask_volume")
|
||||||
|
timestamp DateTime
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@index([productId, timestamp])
|
||||||
|
@@map("tick_data")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 自选股表
|
||||||
|
model Watchlist {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
userId Int @map("user_id")
|
||||||
|
symbol String @db.VarChar(20)
|
||||||
|
alertPrice Decimal? @map("alert_price") @db.Decimal(18, 6)
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@unique([userId, symbol])
|
||||||
|
@@index([userId])
|
||||||
|
@@map("watchlist")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 价格预警表
|
||||||
|
model PriceAlert {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
userId Int @map("user_id")
|
||||||
|
symbol String @db.VarChar(20)
|
||||||
|
alertType String @map("alert_type") @db.VarChar(20) // above, below
|
||||||
|
alertPrice Decimal @map("alert_price") @db.Decimal(18, 6)
|
||||||
|
isActive Boolean @default(true) @map("is_active")
|
||||||
|
triggeredAt DateTime? @map("triggered_at")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@index([userId])
|
||||||
|
@@index([symbol, isActive])
|
||||||
|
@@map("price_alerts")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 热点事件表
|
||||||
|
model HotEvent {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
title String @db.VarChar(255)
|
||||||
|
content String? @db.Text
|
||||||
|
summary String? @db.Text
|
||||||
|
impact String @db.VarChar(20) // bullish, bearish, neutral
|
||||||
|
impactLevel Int @map("impact_level")
|
||||||
|
source String? @db.VarChar(100)
|
||||||
|
analysis String? @db.Text
|
||||||
|
risks String[] @db.VarChar(255)
|
||||||
|
eventTime DateTime? @map("event_time")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
// 关联
|
||||||
|
affectedProducts EventProduct[]
|
||||||
|
|
||||||
|
@@map("hot_events")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 事件影响品种关联表
|
||||||
|
model EventProduct {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
eventId Int @map("event_id")
|
||||||
|
productId Int @map("product_id")
|
||||||
|
impactConfidence Decimal? @map("impact_confidence") @db.Decimal(3, 2)
|
||||||
|
|
||||||
|
event HotEvent @relation(fields: [eventId], references: [id], onDelete: Cascade)
|
||||||
|
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@unique([eventId, productId])
|
||||||
|
@@map("event_products")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 交易信号表
|
||||||
|
model TradingSignal {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
productId Int @map("product_id")
|
||||||
|
timeframe String @db.VarChar(10)
|
||||||
|
signalType String @map("signal_type") @db.VarChar(20) // buy, sell, neutral
|
||||||
|
strength Int
|
||||||
|
indicators Json? // 触发信号的指标
|
||||||
|
description String? @db.Text
|
||||||
|
entryPrice Decimal? @map("entry_price") @db.Decimal(18, 6)
|
||||||
|
stopLoss Decimal? @map("stop_loss") @db.Decimal(18, 6)
|
||||||
|
targetPrice Decimal? @map("target_price") @db.Decimal(18, 6)
|
||||||
|
isActive Boolean @default(true) @map("is_active")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@index([productId, timeframe, createdAt])
|
||||||
|
@@map("trading_signals")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 期权合约表
|
||||||
|
model OptionContract {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
productId Int @map("product_id")
|
||||||
|
symbol String @db.VarChar(20)
|
||||||
|
type String @db.VarChar(10) // call, put
|
||||||
|
strikePrice Decimal @map("strike_price") @db.Decimal(18, 6)
|
||||||
|
expiryDate DateTime @map("expiry_date")
|
||||||
|
price Decimal? @db.Decimal(18, 6)
|
||||||
|
iv Decimal? @db.Decimal(10, 4) // 隐含波动率
|
||||||
|
delta Decimal? @db.Decimal(10, 4)
|
||||||
|
gamma Decimal? @db.Decimal(10, 4)
|
||||||
|
theta Decimal? @db.Decimal(10, 4)
|
||||||
|
vega Decimal? @db.Decimal(10, 4)
|
||||||
|
rho Decimal? @db.Decimal(10, 4)
|
||||||
|
volume BigInt?
|
||||||
|
openInterest BigInt? @map("open_interest")
|
||||||
|
updatedAt DateTime @updatedAt @map("updated_at")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
product Product @relation(fields: [productId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@unique([productId, type, strikePrice, expiryDate])
|
||||||
|
@@index([productId, expiryDate])
|
||||||
|
@@map("option_contracts")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模拟交易记录表
|
||||||
|
model PaperTrade {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
userId Int @map("user_id")
|
||||||
|
symbol String @db.VarChar(20)
|
||||||
|
direction String @db.VarChar(10) // long, short
|
||||||
|
entryPrice Decimal @map("entry_price") @db.Decimal(18, 6)
|
||||||
|
exitPrice Decimal? @map("exit_price") @db.Decimal(18, 6)
|
||||||
|
quantity Int
|
||||||
|
entryTime DateTime @default(now()) @map("entry_time")
|
||||||
|
exitTime DateTime? @map("exit_time")
|
||||||
|
pnl Decimal? @db.Decimal(18, 6)
|
||||||
|
pnlPercent Decimal? @map("pnl_percent") @db.Decimal(10, 4)
|
||||||
|
status String @default("open") @db.VarChar(20) // open, closed
|
||||||
|
notes String? @db.Text
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@index([userId])
|
||||||
|
@@index([userId, status])
|
||||||
|
@@map("paper_trades")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 系统配置表
|
||||||
|
model SystemConfig {
|
||||||
|
id Int @id @default(autoincrement())
|
||||||
|
key String @unique @db.VarChar(100)
|
||||||
|
value String @db.Text
|
||||||
|
description String? @db.Text
|
||||||
|
updatedAt DateTime @updatedAt @map("updated_at")
|
||||||
|
createdAt DateTime @default(now()) @map("created_at")
|
||||||
|
|
||||||
|
@@map("system_configs")
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { Controller, Get, Param, Query } from '@nestjs/common';
|
||||||
|
import { ApiTags, ApiOperation, ApiParam, ApiResponse } from '@nestjs/swagger';
|
||||||
|
import { AiService } from './ai.service';
|
||||||
|
|
||||||
|
@ApiTags('AI智能分析')
|
||||||
|
@Controller('ai')
|
||||||
|
export class AiController {
|
||||||
|
constructor(private readonly aiService: AiService) {}
|
||||||
|
|
||||||
|
@Get('analyze/:symbol')
|
||||||
|
@ApiOperation({ summary: 'AI智能分析品种' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
@ApiResponse({ status: 200, description: '分析成功' })
|
||||||
|
async analyzeSymbol(@Param('symbol') symbol: string) {
|
||||||
|
return this.aiService.analyzeSymbol(symbol);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('batch-analyze')
|
||||||
|
@ApiOperation({ summary: '批量AI分析' })
|
||||||
|
@ApiResponse({ status: 200, description: '分析成功' })
|
||||||
|
async batchAnalyze(@Query('symbols') symbols: string) {
|
||||||
|
const symbolList = symbols.split(',');
|
||||||
|
const results = await Promise.all(
|
||||||
|
symbolList.map((s) => this.aiService.analyzeSymbol(s.trim())),
|
||||||
|
);
|
||||||
|
return symbolList.reduce((acc, symbol, index) => {
|
||||||
|
acc[symbol] = results[index];
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { ConfigModule } from '@nestjs/config';
|
||||||
|
import { AiController } from './ai.controller';
|
||||||
|
import { AiService } from './ai.service';
|
||||||
|
import { MarketModule } from '../market/market.module';
|
||||||
|
import { IndicatorsModule } from '../indicators/indicators.module';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [ConfigModule, MarketModule, IndicatorsModule],
|
||||||
|
controllers: [AiController],
|
||||||
|
providers: [AiService],
|
||||||
|
exports: [AiService],
|
||||||
|
})
|
||||||
|
export class AiModule {}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { AlertService } from './alert.service';
|
||||||
|
import { MarketModule } from '../market/market.module';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [MarketModule],
|
||||||
|
providers: [AlertService],
|
||||||
|
exports: [AlertService],
|
||||||
|
})
|
||||||
|
export class AlertModule {}
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
import { Injectable, Logger } from '@nestjs/common';
|
||||||
|
import { Cron, CronExpression } from '@nestjs/schedule';
|
||||||
|
import { PrismaService } from '@common/prisma/prisma.service';
|
||||||
|
import { RedisService } from '@common/redis/redis.service';
|
||||||
|
import { MarketService } from '../market/market.service';
|
||||||
|
|
||||||
|
export interface PriceAlert {
|
||||||
|
id: string;
|
||||||
|
symbol: string;
|
||||||
|
alertType: 'above' | 'below';
|
||||||
|
alertPrice: number;
|
||||||
|
isActive: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class AlertService {
|
||||||
|
private readonly logger = new Logger(AlertService.name);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private readonly prisma: PrismaService,
|
||||||
|
private readonly redis: RedisService,
|
||||||
|
private readonly marketService: MarketService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建价格预警
|
||||||
|
*/
|
||||||
|
async createAlert(
|
||||||
|
userId: number,
|
||||||
|
symbol: string,
|
||||||
|
alertType: 'above' | 'below',
|
||||||
|
alertPrice: number,
|
||||||
|
): Promise<PriceAlert> {
|
||||||
|
// 验证品种存在
|
||||||
|
await this.marketService.getProduct(symbol);
|
||||||
|
|
||||||
|
const alert = await this.prisma.priceAlert.create({
|
||||||
|
data: {
|
||||||
|
userId,
|
||||||
|
symbol: symbol.toUpperCase(),
|
||||||
|
alertType,
|
||||||
|
alertPrice,
|
||||||
|
isActive: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: alert.id.toString(),
|
||||||
|
symbol: alert.symbol,
|
||||||
|
alertType: alert.alertType as 'above' | 'below',
|
||||||
|
alertPrice: Number(alert.alertPrice),
|
||||||
|
isActive: alert.isActive,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取用户的价格预警
|
||||||
|
*/
|
||||||
|
async getUserAlerts(userId: number): Promise<PriceAlert[]> {
|
||||||
|
const alerts = await this.prisma.priceAlert.findMany({
|
||||||
|
where: { userId },
|
||||||
|
orderBy: { createdAt: 'desc' },
|
||||||
|
});
|
||||||
|
|
||||||
|
return alerts.map((alert) => ({
|
||||||
|
id: alert.id.toString(),
|
||||||
|
symbol: alert.symbol,
|
||||||
|
alertType: alert.alertType as 'above' | 'below',
|
||||||
|
alertPrice: Number(alert.alertPrice),
|
||||||
|
isActive: alert.isActive,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除价格预警
|
||||||
|
*/
|
||||||
|
async deleteAlert(userId: number, alertId: string): Promise<void> {
|
||||||
|
const alert = await this.prisma.priceAlert.findFirst({
|
||||||
|
where: {
|
||||||
|
id: parseInt(alertId),
|
||||||
|
userId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!alert) {
|
||||||
|
throw new Error('预警不存在');
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.prisma.priceAlert.delete({
|
||||||
|
where: { id: parseInt(alertId) },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停用/启用预警
|
||||||
|
*/
|
||||||
|
async toggleAlert(userId: number, alertId: string, isActive: boolean): Promise<PriceAlert> {
|
||||||
|
const alert = await this.prisma.priceAlert.update({
|
||||||
|
where: {
|
||||||
|
id: parseInt(alertId),
|
||||||
|
},
|
||||||
|
data: { isActive },
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: alert.id.toString(),
|
||||||
|
symbol: alert.symbol,
|
||||||
|
alertType: alert.alertType as 'above' | 'below',
|
||||||
|
alertPrice: Number(alert.alertPrice),
|
||||||
|
isActive: alert.isActive,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定时检查价格预警
|
||||||
|
*/
|
||||||
|
@Cron(CronExpression.EVERY_MINUTE)
|
||||||
|
async checkPriceAlerts() {
|
||||||
|
try {
|
||||||
|
const activeAlerts = await this.prisma.priceAlert.findMany({
|
||||||
|
where: { isActive: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const alert of activeAlerts) {
|
||||||
|
try {
|
||||||
|
const tick = await this.marketService.getTickData(alert.symbol);
|
||||||
|
const currentPrice = tick.price;
|
||||||
|
const alertPrice = Number(alert.alertPrice);
|
||||||
|
|
||||||
|
let triggered = false;
|
||||||
|
|
||||||
|
if (alert.alertType === 'above' && currentPrice >= alertPrice) {
|
||||||
|
triggered = true;
|
||||||
|
} else if (alert.alertType === 'below' && currentPrice <= alertPrice) {
|
||||||
|
triggered = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (triggered) {
|
||||||
|
// 标记为已触发
|
||||||
|
await this.prisma.priceAlert.update({
|
||||||
|
where: { id: alert.id },
|
||||||
|
data: {
|
||||||
|
isActive: false,
|
||||||
|
triggeredAt: new Date(),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// TODO: 发送通知（邮件/短信/推送）
|
||||||
|
this.logger.log(
|
||||||
|
`价格预警触发: ${alert.symbol} ${alert.alertType} ${alertPrice}, 当前价格: ${currentPrice}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.logger.error(`检查预警失败 ${alert.symbol}:`, error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
this.logger.error('检查价格预警失败:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { ConfigModule } from '@nestjs/config';
|
||||||
|
import { ScheduleModule } from '@nestjs/schedule';
|
||||||
|
import { APP_GUARD, APP_INTERCEPTOR } from '@nestjs/core';
|
||||||
|
import { ThrottlerModule, ThrottlerGuard } from '@nestjs/throttler';
|
||||||
|
|
||||||
|
// 配置模块
|
||||||
|
import appConfig from './config/app.config';
|
||||||
|
import databaseConfig from './config/database.config';
|
||||||
|
import redisConfig from './config/redis.config';
|
||||||
|
import jwtConfig from './config/jwt.config';
|
||||||
|
import marketDataConfig from './config/market-data.config';
|
||||||
|
import openaiConfig from './config/openai.config';
|
||||||
|
|
||||||
|
// 功能模块
|
||||||
|
import { AuthModule } from './auth/auth.module';
|
||||||
|
import { UserModule } from './user/user.module';
|
||||||
|
import { MarketModule } from './market/market.module';
|
||||||
|
import { IndicatorsModule } from './indicators/indicators.module';
|
||||||
|
import { OptionsModule } from './options/options.module';
|
||||||
|
import { AiModule } from './ai/ai.module';
|
||||||
|
import { EventsModule } from './events/events.module';
|
||||||
|
import { WatchlistModule } from './watchlist/watchlist.module';
|
||||||
|
import { AlertModule } from './alert/alert.module';
|
||||||
|
import { CommonModule } from './common/common.module';
|
||||||
|
|
||||||
|
// 拦截器
|
||||||
|
import { TransformInterceptor } from './common/interceptors/transform.interceptor';
|
||||||
|
import { LoggingInterceptor } from './common/interceptors/logging.interceptor';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [
|
||||||
|
// 配置模块
|
||||||
|
ConfigModule.forRoot({
|
||||||
|
isGlobal: true,
|
||||||
|
load: [
|
||||||
|
appConfig,
|
||||||
|
databaseConfig,
|
||||||
|
redisConfig,
|
||||||
|
jwtConfig,
|
||||||
|
marketDataConfig,
|
||||||
|
openaiConfig,
|
||||||
|
],
|
||||||
|
envFilePath: ['.env.local', '.env'],
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 限流模块
|
||||||
|
ThrottlerModule.forRoot([{
|
||||||
|
ttl: 60000, // 1分钟
|
||||||
|
limit: 100, // 每IP每分钟最多100请求
|
||||||
|
}]),
|
||||||
|
|
||||||
|
// 定时任务模块
|
||||||
|
ScheduleModule.forRoot(),
|
||||||
|
|
||||||
|
// 公共模块
|
||||||
|
CommonModule,
|
||||||
|
|
||||||
|
// 业务模块
|
||||||
|
AuthModule,
|
||||||
|
UserModule,
|
||||||
|
MarketModule,
|
||||||
|
IndicatorsModule,
|
||||||
|
OptionsModule,
|
||||||
|
AiModule,
|
||||||
|
EventsModule,
|
||||||
|
WatchlistModule,
|
||||||
|
AlertModule,
|
||||||
|
],
|
||||||
|
providers: [
|
||||||
|
// 全局拦截器
|
||||||
|
{
|
||||||
|
provide: APP_INTERCEPTOR,
|
||||||
|
useClass: LoggingInterceptor,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
provide: APP_INTERCEPTOR,
|
||||||
|
useClass: TransformInterceptor,
|
||||||
|
},
|
||||||
|
// 全局限流守卫
|
||||||
|
{
|
||||||
|
provide: APP_GUARD,
|
||||||
|
useClass: ThrottlerGuard,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class AppModule {}
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
import {
|
||||||
|
Controller,
|
||||||
|
Post,
|
||||||
|
Body,
|
||||||
|
Get,
|
||||||
|
Put,
|
||||||
|
Headers,
|
||||||
|
UseGuards,
|
||||||
|
HttpCode,
|
||||||
|
HttpStatus,
|
||||||
|
} from '@nestjs/common';
|
||||||
|
import { ApiTags, ApiOperation, ApiBearerAuth, ApiResponse } from '@nestjs/swagger';
|
||||||
|
import { AuthService } from './auth.service';
|
||||||
|
import { JwtAuthGuard } from './guards/jwt-auth.guard';
|
||||||
|
import { CurrentUser } from './decorators/current-user.decorator';
|
||||||
|
import { RegisterDto, LoginDto, AuthResponseDto, UserProfileDto } from './dto/auth.dto';
|
||||||
|
|
||||||
|
@ApiTags('认证')
|
||||||
|
@Controller('auth')
|
||||||
|
export class AuthController {
|
||||||
|
constructor(private readonly authService: AuthService) {}
|
||||||
|
|
||||||
|
@Post('register')
|
||||||
|
@ApiOperation({ summary: '用户注册' })
|
||||||
|
@ApiResponse({ status: 201, description: '注册成功', type: AuthResponseDto })
|
||||||
|
@ApiResponse({ status: 400, description: '参数错误或用户已存在' })
|
||||||
|
async register(@Body() dto: RegisterDto) {
|
||||||
|
return this.authService.register(dto);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Post('login')
|
||||||
|
@HttpCode(HttpStatus.OK)
|
||||||
|
@ApiOperation({ summary: '用户登录' })
|
||||||
|
@ApiResponse({ status: 200, description: '登录成功', type: AuthResponseDto })
|
||||||
|
@ApiResponse({ status: 401, description: '用户名或密码错误' })
|
||||||
|
async login(@Body() dto: LoginDto) {
|
||||||
|
return this.authService.login(dto);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Post('logout')
|
||||||
|
@HttpCode(HttpStatus.OK)
|
||||||
|
@UseGuards(JwtAuthGuard)
|
||||||
|
@ApiBearerAuth()
|
||||||
|
@ApiOperation({ summary: '用户登出' })
|
||||||
|
async logout(@Headers('authorization') auth: string) {
|
||||||
|
const token = auth?.replace('Bearer ', '');
|
||||||
|
return this.authService.logout(token);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Post('refresh')
|
||||||
|
@HttpCode(HttpStatus.OK)
|
||||||
|
@ApiOperation({ summary: '刷新Token' })
|
||||||
|
async refreshToken(@Body('refreshToken') refreshToken: string) {
|
||||||
|
return this.authService.refreshToken(refreshToken);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('profile')
|
||||||
|
@UseGuards(JwtAuthGuard)
|
||||||
|
@ApiBearerAuth()
|
||||||
|
@ApiOperation({ summary: '获取用户信息' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功', type: UserProfileDto })
|
||||||
|
async getProfile(@CurrentUser('userId') userId: number) {
|
||||||
|
return this.authService.getProfile(userId);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Put('profile')
|
||||||
|
@UseGuards(JwtAuthGuard)
|
||||||
|
@ApiBearerAuth()
|
||||||
|
@ApiOperation({ summary: '更新用户信息' })
|
||||||
|
async updateProfile(
|
||||||
|
@CurrentUser('userId') userId: number,
|
||||||
|
@Body() data: Partial<{ phone: string; avatarUrl: string }>,
|
||||||
|
) {
|
||||||
|
return this.authService.updateProfile(userId, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { JwtModule } from '@nestjs/jwt';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import { PassportModule } from '@nestjs/passport';
|
||||||
|
import { AuthService } from './auth.service';
|
||||||
|
import { AuthController } from './auth.controller';
|
||||||
|
import { JwtStrategy } from './strategies/jwt.strategy';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [
|
||||||
|
PassportModule.register({ defaultStrategy: 'jwt' }),
|
||||||
|
JwtModule.registerAsync({
|
||||||
|
useFactory: (configService: ConfigService) => ({
|
||||||
|
secret: configService.get('jwt.secret'),
|
||||||
|
signOptions: {
|
||||||
|
expiresIn: configService.get('jwt.expiresIn'),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
inject: [ConfigService],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
controllers: [AuthController],
|
||||||
|
providers: [AuthService, JwtStrategy],
|
||||||
|
exports: [AuthService],
|
||||||
|
})
|
||||||
|
export class AuthModule {}
|
||||||
@ -0,0 +1,212 @@
|
|||||||
|
import { Injectable, UnauthorizedException, BadRequestException } from '@nestjs/common';
|
||||||
|
import { JwtService } from '@nestjs/jwt';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import * as bcrypt from 'bcrypt';
|
||||||
|
import { PrismaService } from '@common/prisma/prisma.service';
|
||||||
|
import { RedisService } from '@common/redis/redis.service';
|
||||||
|
import { RegisterDto, LoginDto } from './dto/auth.dto';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class AuthService {
|
||||||
|
constructor(
|
||||||
|
private readonly prisma: PrismaService,
|
||||||
|
private readonly jwtService: JwtService,
|
||||||
|
private readonly configService: ConfigService,
|
||||||
|
private readonly redis: RedisService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async register(dto: RegisterDto) {
|
||||||
|
// 检查用户名是否已存在
|
||||||
|
const existingUser = await this.prisma.user.findFirst({
|
||||||
|
where: {
|
||||||
|
OR: [
|
||||||
|
{ username: dto.username },
|
||||||
|
{ email: dto.email },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingUser) {
|
||||||
|
throw new BadRequestException('用户名或邮箱已存在');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加密密码
|
||||||
|
const passwordHash = await bcrypt.hash(dto.password, 10);
|
||||||
|
|
||||||
|
// 创建用户
|
||||||
|
const user = await this.prisma.user.create({
|
||||||
|
data: {
|
||||||
|
username: dto.username,
|
||||||
|
email: dto.email,
|
||||||
|
passwordHash,
|
||||||
|
phone: dto.phone,
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
email: true,
|
||||||
|
avatarUrl: true,
|
||||||
|
membershipLevel: true,
|
||||||
|
createdAt: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 生成Token
|
||||||
|
const tokens = await this.generateTokens(user.id, user.username);
|
||||||
|
|
||||||
|
return {
|
||||||
|
user,
|
||||||
|
...tokens,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async login(dto: LoginDto) {
|
||||||
|
// 查找用户
|
||||||
|
const user = await this.prisma.user.findFirst({
|
||||||
|
where: {
|
||||||
|
OR: [
|
||||||
|
{ username: dto.username },
|
||||||
|
{ email: dto.username },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
throw new UnauthorizedException('用户名或密码错误');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证密码
|
||||||
|
const isPasswordValid = await bcrypt.compare(dto.password, user.passwordHash);
|
||||||
|
if (!isPasswordValid) {
|
||||||
|
throw new UnauthorizedException('用户名或密码错误');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查用户状态
|
||||||
|
if (!user.isActive) {
|
||||||
|
throw new UnauthorizedException('账户已被禁用');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成Token
|
||||||
|
const tokens = await this.generateTokens(user.id, user.username);
|
||||||
|
|
||||||
|
// 保存会话到Redis
|
||||||
|
const ttl = parseInt(this.configService.get('jwt.expiresIn'), 10) || 3600;
|
||||||
|
await this.redis.setSession(tokens.token, user.id, ttl);
|
||||||
|
|
||||||
|
return {
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
email: user.email,
|
||||||
|
avatarUrl: user.avatarUrl,
|
||||||
|
membershipLevel: user.membershipLevel,
|
||||||
|
},
|
||||||
|
...tokens,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async logout(token: string) {
|
||||||
|
await this.redis.deleteSession(token);
|
||||||
|
return { message: '登出成功' };
|
||||||
|
}
|
||||||
|
|
||||||
|
async refreshToken(refreshToken: string) {
|
||||||
|
try {
|
||||||
|
const payload = this.jwtService.verify(refreshToken, {
|
||||||
|
secret: this.configService.get('jwt.secret'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const user = await this.prisma.user.findUnique({
|
||||||
|
where: { id: payload.sub },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user || !user.isActive) {
|
||||||
|
throw new UnauthorizedException('用户不存在或已被禁用');
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokens = await this.generateTokens(user.id, user.username);
|
||||||
|
|
||||||
|
// 更新会话
|
||||||
|
const ttl = parseInt(this.configService.get('jwt.expiresIn'), 10) || 3600;
|
||||||
|
await this.redis.setSession(tokens.token, user.id, ttl);
|
||||||
|
|
||||||
|
return tokens;
|
||||||
|
} catch (error) {
|
||||||
|
throw new UnauthorizedException('无效的刷新令牌');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getProfile(userId: number) {
|
||||||
|
const user = await this.prisma.user.findUnique({
|
||||||
|
where: { id: userId },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
email: true,
|
||||||
|
phone: true,
|
||||||
|
avatarUrl: true,
|
||||||
|
membershipLevel: true,
|
||||||
|
createdAt: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
throw new UnauthorizedException('用户不存在');
|
||||||
|
}
|
||||||
|
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateProfile(userId: number, data: Partial<{ phone: string; avatarUrl: string }>) {
|
||||||
|
const user = await this.prisma.user.update({
|
||||||
|
where: { id: userId },
|
||||||
|
data,
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
email: true,
|
||||||
|
phone: true,
|
||||||
|
avatarUrl: true,
|
||||||
|
membershipLevel: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async generateTokens(userId: number, username: string) {
|
||||||
|
const payload = { sub: userId, username };
|
||||||
|
|
||||||
|
const [token, refreshToken] = await Promise.all([
|
||||||
|
this.jwtService.signAsync(payload),
|
||||||
|
this.jwtService.signAsync(payload, {
|
||||||
|
expiresIn: this.configService.get('jwt.refreshExpiresIn') || '7d',
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
token,
|
||||||
|
refreshToken,
|
||||||
|
expiresIn: parseInt(this.configService.get('jwt.expiresIn'), 10) || 3600,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async validateUser(userId: number) {
|
||||||
|
const user = await this.prisma.user.findUnique({
|
||||||
|
where: { id: userId },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
email: true,
|
||||||
|
isActive: true,
|
||||||
|
membershipLevel: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user || !user.isActive) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { createParamDecorator, ExecutionContext } from '@nestjs/common';
|
||||||
|
|
||||||
|
export const CurrentUser = createParamDecorator(
|
||||||
|
(data: string | undefined, ctx: ExecutionContext) => {
|
||||||
|
const request = ctx.switchToHttp().getRequest();
|
||||||
|
const user = request.user;
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return data ? user[data] : user;
|
||||||
|
},
|
||||||
|
);
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
import { IsString, IsEmail, IsOptional, MinLength, IsPhoneNumber, IsUrl } from 'class-validator';
|
||||||
|
import { ApiProperty } from '@nestjs/swagger';
|
||||||
|
|
||||||
|
export class RegisterDto {
|
||||||
|
@ApiProperty({ description: '用户名', example: 'trader001' })
|
||||||
|
@IsString()
|
||||||
|
@MinLength(3)
|
||||||
|
username: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '邮箱', example: 'user@example.com' })
|
||||||
|
@IsEmail()
|
||||||
|
email: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '密码', example: 'password123' })
|
||||||
|
@IsString()
|
||||||
|
@MinLength(6)
|
||||||
|
password: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '手机号', required: false, example: '13800138000' })
|
||||||
|
@IsOptional()
|
||||||
|
@IsPhoneNumber('CN')
|
||||||
|
phone?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class LoginDto {
|
||||||
|
@ApiProperty({ description: '用户名或邮箱', example: 'trader001' })
|
||||||
|
@IsString()
|
||||||
|
username: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '密码', example: 'password123' })
|
||||||
|
@IsString()
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class AuthResponseDto {
|
||||||
|
@ApiProperty()
|
||||||
|
user: {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
avatarUrl: string | null;
|
||||||
|
membershipLevel: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
@ApiProperty()
|
||||||
|
token: string;
|
||||||
|
|
||||||
|
@ApiProperty()
|
||||||
|
refreshToken: string;
|
||||||
|
|
||||||
|
@ApiProperty()
|
||||||
|
expiresIn: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class UserProfileDto {
|
||||||
|
@ApiProperty()
|
||||||
|
id: number;
|
||||||
|
|
||||||
|
@ApiProperty()
|
||||||
|
username: string;
|
||||||
|
|
||||||
|
@ApiProperty()
|
||||||
|
email: string;
|
||||||
|
|
||||||
|
@ApiProperty({ nullable: true })
|
||||||
|
phone: string | null;
|
||||||
|
|
||||||
|
@ApiProperty({ nullable: true })
|
||||||
|
avatarUrl: string | null;
|
||||||
|
|
||||||
|
@ApiProperty()
|
||||||
|
membershipLevel: number;
|
||||||
|
|
||||||
|
@ApiProperty()
|
||||||
|
createdAt: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class UpdateProfileDto {
|
||||||
|
@ApiProperty({ required: false })
|
||||||
|
@IsOptional()
|
||||||
|
@IsPhoneNumber('CN')
|
||||||
|
phone?: string;
|
||||||
|
|
||||||
|
@ApiProperty({ required: false })
|
||||||
|
@IsOptional()
|
||||||
|
@IsUrl()
|
||||||
|
avatarUrl?: string;
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { Injectable, ExecutionContext, UnauthorizedException } from '@nestjs/common';
|
||||||
|
import { AuthGuard } from '@nestjs/passport';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class JwtAuthGuard extends AuthGuard('jwt') {
|
||||||
|
canActivate(
|
||||||
|
context: ExecutionContext,
|
||||||
|
): boolean | Promise<boolean> | Observable<boolean> {
|
||||||
|
return super.canActivate(context);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleRequest(err, user, info) {
|
||||||
|
if (err || !user) {
|
||||||
|
throw err || new UnauthorizedException('请先登录');
|
||||||
|
}
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { Injectable, UnauthorizedException } from '@nestjs/common';
|
||||||
|
import { PassportStrategy } from '@nestjs/passport';
|
||||||
|
import { ExtractJwt, Strategy } from 'passport-jwt';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import { AuthService } from '../auth.service';
|
||||||
|
|
||||||
|
interface JwtPayload {
|
||||||
|
sub: number;
|
||||||
|
username: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class JwtStrategy extends PassportStrategy(Strategy) {
|
||||||
|
constructor(
|
||||||
|
private readonly configService: ConfigService,
|
||||||
|
private readonly authService: AuthService,
|
||||||
|
) {
|
||||||
|
super({
|
||||||
|
jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
|
||||||
|
ignoreExpiration: false,
|
||||||
|
secretOrKey: configService.get('jwt.secret'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async validate(payload: JwtPayload) {
|
||||||
|
const user = await this.authService.validateUser(payload.sub);
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
throw new UnauthorizedException('用户不存在或已被禁用');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
userId: payload.sub,
|
||||||
|
username: payload.username,
|
||||||
|
membershipLevel: user.membershipLevel,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { PrismaModule } from './prisma/prisma.module';
|
||||||
|
import { RedisModule } from './redis/redis.module';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [PrismaModule, RedisModule],
|
||||||
|
exports: [PrismaModule, RedisModule],
|
||||||
|
})
|
||||||
|
export class CommonModule {}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import {
|
||||||
|
Injectable,
|
||||||
|
NestInterceptor,
|
||||||
|
ExecutionContext,
|
||||||
|
CallHandler,
|
||||||
|
} from '@nestjs/common';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { tap } from 'rxjs/operators';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class LoggingInterceptor implements NestInterceptor {
|
||||||
|
intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
|
||||||
|
const request = context.switchToHttp().getRequest();
|
||||||
|
const method = request.method;
|
||||||
|
const url = request.url;
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
return next.handle().pipe(
|
||||||
|
tap(() => {
|
||||||
|
const response = context.switchToHttp().getResponse();
|
||||||
|
const statusCode = response.statusCode;
|
||||||
|
const delay = Date.now() - now;
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`[${new Date().toISOString()}] ${method} ${url} ${statusCode} - ${delay}ms`,
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import {
|
||||||
|
Injectable,
|
||||||
|
NestInterceptor,
|
||||||
|
ExecutionContext,
|
||||||
|
CallHandler,
|
||||||
|
} from '@nestjs/common';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
import { map } from 'rxjs/operators';
|
||||||
|
|
||||||
|
export interface Response<T> {
|
||||||
|
code: number;
|
||||||
|
message: string;
|
||||||
|
data: T;
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class TransformInterceptor<T>
|
||||||
|
implements NestInterceptor<T, Response<T>> {
|
||||||
|
intercept(
|
||||||
|
context: ExecutionContext,
|
||||||
|
next: CallHandler,
|
||||||
|
): Observable<Response<T>> {
|
||||||
|
return next.handle().pipe(
|
||||||
|
map((data) => ({
|
||||||
|
code: 200,
|
||||||
|
message: 'success',
|
||||||
|
data,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { Global, Module } from '@nestjs/common';
|
||||||
|
import { PrismaService } from './prisma.service';
|
||||||
|
|
||||||
|
@Global()
|
||||||
|
@Module({
|
||||||
|
providers: [PrismaService],
|
||||||
|
exports: [PrismaService],
|
||||||
|
})
|
||||||
|
export class PrismaModule {}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
|
||||||
|
import { PrismaClient } from '@prisma/client';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
|
||||||
|
constructor() {
|
||||||
|
super({
|
||||||
|
log: process.env.NODE_ENV === 'development'
|
||||||
|
? ['query', 'info', 'warn', 'error']
|
||||||
|
: ['error', 'warn'],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async onModuleInit() {
|
||||||
|
await this.$connect();
|
||||||
|
console.log('📦 数据库连接成功');
|
||||||
|
}
|
||||||
|
|
||||||
|
async onModuleDestroy() {
|
||||||
|
await this.$disconnect();
|
||||||
|
console.log('📦 数据库连接已关闭');
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { Global, Module } from '@nestjs/common';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import Redis from 'ioredis';
|
||||||
|
import { RedisService } from './redis.service';
|
||||||
|
|
||||||
|
@Global()
|
||||||
|
@Module({
|
||||||
|
providers: [
|
||||||
|
{
|
||||||
|
provide: 'REDIS_CLIENT',
|
||||||
|
useFactory: (configService: ConfigService) => {
|
||||||
|
const redisUrl = configService.get('redis.url');
|
||||||
|
const redisPassword = configService.get('redis.password');
|
||||||
|
|
||||||
|
return new Redis(redisUrl, {
|
||||||
|
password: redisPassword || undefined,
|
||||||
|
retryStrategy: (times) => {
|
||||||
|
const delay = Math.min(times * 50, 2000);
|
||||||
|
return delay;
|
||||||
|
},
|
||||||
|
maxRetriesPerRequest: 3,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
inject: [ConfigService],
|
||||||
|
},
|
||||||
|
RedisService,
|
||||||
|
],
|
||||||
|
exports: [RedisService],
|
||||||
|
})
|
||||||
|
export class RedisModule {}
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
import { Injectable, Inject } from '@nestjs/common';
|
||||||
|
import Redis from 'ioredis';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class RedisService {
|
||||||
|
constructor(
|
||||||
|
@Inject('REDIS_CLIENT')
|
||||||
|
private readonly redis: Redis,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// 基础操作
|
||||||
|
async get(key: string): Promise<string | null> {
|
||||||
|
return this.redis.get(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async set(key: string, value: string, ttl?: number): Promise<void> {
|
||||||
|
if (ttl) {
|
||||||
|
await this.redis.setex(key, ttl, value);
|
||||||
|
} else {
|
||||||
|
await this.redis.set(key, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async del(key: string): Promise<void> {
|
||||||
|
await this.redis.del(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async exists(key: string): Promise<boolean> {
|
||||||
|
const result = await this.redis.exists(key);
|
||||||
|
return result === 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
async expire(key: string, seconds: number): Promise<void> {
|
||||||
|
await this.redis.expire(key, seconds);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hash操作
|
||||||
|
async hget(key: string, field: string): Promise<string | null> {
|
||||||
|
return this.redis.hget(key, field);
|
||||||
|
}
|
||||||
|
|
||||||
|
async hset(key: string, field: string, value: string): Promise<void> {
|
||||||
|
await this.redis.hset(key, field, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
async hgetall(key: string): Promise<Record<string, string>> {
|
||||||
|
return this.redis.hgetall(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async hdel(key: string, field: string): Promise<void> {
|
||||||
|
await this.redis.hdel(key, field);
|
||||||
|
}
|
||||||
|
|
||||||
|
// List操作
|
||||||
|
async lpush(key: string, value: string): Promise<void> {
|
||||||
|
await this.redis.lpush(key, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
async rpush(key: string, value: string): Promise<void> {
|
||||||
|
await this.redis.rpush(key, value);
|
||||||
|
}
|
||||||
|
|
||||||
|
async lrange(key: string, start: number, stop: number): Promise<string[]> {
|
||||||
|
return this.redis.lrange(key, start, stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sorted Set操作
|
||||||
|
async zadd(key: string, score: number, member: string): Promise<void> {
|
||||||
|
await this.redis.zadd(key, score, member);
|
||||||
|
}
|
||||||
|
|
||||||
|
async zrange(key: string, start: number, stop: number): Promise<string[]> {
|
||||||
|
return this.redis.zrange(key, start, stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
async zrevrange(key: string, start: number, stop: number): Promise<string[]> {
|
||||||
|
return this.redis.zrevrange(key, start, stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
async zremrangebyscore(key: string, min: number, max: number): Promise<void> {
|
||||||
|
await this.redis.zremrangebyscore(key, min, max);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 行情数据专用方法
|
||||||
|
async setTick(symbol: string, data: Record<string, string>, ttl: number = 60): Promise<void> {
|
||||||
|
const key = `market:tick:${symbol}`;
|
||||||
|
await this.redis.hset(key, data);
|
||||||
|
await this.redis.expire(key, ttl);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getTick(symbol: string): Promise<Record<string, string>> {
|
||||||
|
const key = `market:tick:${symbol}`;
|
||||||
|
return this.redis.hgetall(key);
|
||||||
|
}
|
||||||
|
|
||||||
|
async addKline(symbol: string, period: string, data: string, maxCount: number = 500): Promise<void> {
|
||||||
|
const key = `market:kline:${symbol}:${period}`;
|
||||||
|
const score = Date.now();
|
||||||
|
await this.redis.zadd(key, score, data);
|
||||||
|
await this.redis.zremrangebyrank(key, 0, -(maxCount + 1));
|
||||||
|
await this.redis.expire(key, 7 * 24 * 60 * 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getKlines(symbol: string, period: string, count: number = 100): Promise<string[]> {
|
||||||
|
const key = `market:kline:${symbol}:${period}`;
|
||||||
|
return this.redis.zrevrange(key, 0, count - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Session管理
|
||||||
|
async setSession(token: string, userId: number, ttl: number): Promise<void> {
|
||||||
|
const key = `session:${token}`;
|
||||||
|
await this.redis.setex(key, ttl, userId.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteSession(token: string): Promise<void> {
|
||||||
|
const key = `session:${token}`;
|
||||||
|
await this.redis.del(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { registerAs } from '@nestjs/config';
|
||||||
|
|
||||||
|
export default registerAs('app', () => ({
|
||||||
|
nodeEnv: process.env.NODE_ENV || 'development',
|
||||||
|
port: parseInt(process.env.PORT, 10) || 3000,
|
||||||
|
apiPrefix: process.env.API_PREFIX || '/api/v1',
|
||||||
|
corsOrigin: process.env.CORS_ORIGIN || '*',
|
||||||
|
logLevel: process.env.LOG_LEVEL || 'debug',
|
||||||
|
metricsEnabled: process.env.METRICS_ENABLED === 'true',
|
||||||
|
metricsPort: parseInt(process.env.METRICS_PORT, 10) || 9090,
|
||||||
|
}));
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import { registerAs } from '@nestjs/config';
|
||||||
|
|
||||||
|
export default registerAs('database', () => ({
|
||||||
|
url: process.env.DATABASE_URL,
|
||||||
|
}));
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { registerAs } from '@nestjs/config';
|
||||||
|
|
||||||
|
export default registerAs('jwt', () => ({
|
||||||
|
secret: process.env.JWT_SECRET || 'default-secret-change-in-production',
|
||||||
|
expiresIn: process.env.JWT_EXPIRES_IN || '1h',
|
||||||
|
refreshExpiresIn: process.env.JWT_REFRESH_EXPIRES_IN || '7d',
|
||||||
|
}));
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { registerAs } from '@nestjs/config';
|
||||||
|
|
||||||
|
export default registerAs('marketData', () => ({
|
||||||
|
provider: process.env.MARKET_DATA_PROVIDER || 'mock',
|
||||||
|
apiKey: process.env.MARKET_DATA_API_KEY,
|
||||||
|
apiSecret: process.env.MARKET_DATA_API_SECRET,
|
||||||
|
wsUrl: process.env.MARKET_DATA_WS_URL,
|
||||||
|
// 重连配置
|
||||||
|
reconnectInterval: 5000,
|
||||||
|
maxReconnectAttempts: 10,
|
||||||
|
// 数据更新频率 (毫秒)
|
||||||
|
tickUpdateInterval: 1000,
|
||||||
|
klineUpdateInterval: 5000,
|
||||||
|
}));
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import { registerAs } from '@nestjs/config';
|
||||||
|
|
||||||
|
export default registerAs('openai', () => ({
|
||||||
|
apiKey: process.env.OPENAI_API_KEY,
|
||||||
|
baseURL: process.env.OPENAI_BASE_URL,
|
||||||
|
model: process.env.OPENAI_MODEL || 'gpt-4-turbo-preview',
|
||||||
|
// AI分析配置
|
||||||
|
maxTokens: 2000,
|
||||||
|
temperature: 0.7,
|
||||||
|
// 请求限制
|
||||||
|
maxRequestsPerMinute: 20,
|
||||||
|
// 缓存配置
|
||||||
|
cacheTTL: 300, // 5分钟
|
||||||
|
}));
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import { registerAs } from '@nestjs/config';
|
||||||
|
|
||||||
|
export default registerAs('redis', () => ({
|
||||||
|
url: process.env.REDIS_URL || 'redis://localhost:6379',
|
||||||
|
password: process.env.REDIS_PASSWORD,
|
||||||
|
}));
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { Controller, Get, Param, Query } from '@nestjs/common';
|
||||||
|
import { ApiTags, ApiOperation, ApiParam, ApiQuery, ApiResponse } from '@nestjs/swagger';
|
||||||
|
import { EventsService } from './events.service';
|
||||||
|
|
||||||
|
@ApiTags('热点事件')
|
||||||
|
@Controller('events')
|
||||||
|
export class EventsController {
|
||||||
|
constructor(private readonly eventsService: EventsService) {}
|
||||||
|
|
||||||
|
@Get()
|
||||||
|
@ApiOperation({ summary: '获取热点事件列表' })
|
||||||
|
@ApiQuery({ name: 'impact', required: false, enum: ['bullish', 'bearish', 'neutral'] })
|
||||||
|
@ApiQuery({ name: 'startDate', required: false })
|
||||||
|
@ApiQuery({ name: 'endDate', required: false })
|
||||||
|
@ApiQuery({ name: 'page', required: false, type: Number })
|
||||||
|
@ApiQuery({ name: 'size', required: false, type: Number })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
async getEvents(
|
||||||
|
@Query('impact') impact?: string,
|
||||||
|
@Query('startDate') startDate?: string,
|
||||||
|
@Query('endDate') endDate?: string,
|
||||||
|
@Query('page') page = '1',
|
||||||
|
@Query('size') size = '20',
|
||||||
|
) {
|
||||||
|
return this.eventsService.getEvents(
|
||||||
|
impact,
|
||||||
|
startDate ? new Date(startDate) : undefined,
|
||||||
|
endDate ? new Date(endDate) : undefined,
|
||||||
|
parseInt(page, 10),
|
||||||
|
parseInt(size, 10),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get(':id')
|
||||||
|
@ApiOperation({ summary: '获取事件详情' })
|
||||||
|
@ApiParam({ name: 'id', description: '事件ID' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
@ApiResponse({ status: 404, description: '事件不存在' })
|
||||||
|
async getEventById(@Param('id') id: string) {
|
||||||
|
return this.eventsService.getEventById(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { EventsController } from './events.controller';
|
||||||
|
import { EventsService } from './events.service';
|
||||||
|
import { MarketModule } from '../market/market.module';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [MarketModule],
|
||||||
|
controllers: [EventsController],
|
||||||
|
providers: [EventsService],
|
||||||
|
exports: [EventsService],
|
||||||
|
})
|
||||||
|
export class EventsModule {}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { IsString, IsOptional, IsEnum, IsArray } from 'class-validator';
|
||||||
|
import { ApiProperty } from '@nestjs/swagger';
|
||||||
|
import { IndicatorType } from '../interfaces/indicator.interface';
|
||||||
|
|
||||||
|
export class GetIndicatorsDto {
|
||||||
|
@ApiProperty({ description: '周期', enum: ['1m', '5m', '15m', '30m', '1h', '1d', '1w'] })
|
||||||
|
@IsString()
|
||||||
|
@IsEnum(['1m', '5m', '15m', '30m', '1h', '1d', '1w'])
|
||||||
|
period: string;
|
||||||
|
|
||||||
|
@ApiProperty({
|
||||||
|
description: '指标列表',
|
||||||
|
isArray: true,
|
||||||
|
enum: ['macd', 'rsi', 'bollinger', 'kdj', 'sar', 'obv', 'dmi', 'cci', 'wr', 'ma5', 'ma10', 'ma20', 'ma60'],
|
||||||
|
})
|
||||||
|
@IsOptional()
|
||||||
|
@IsArray()
|
||||||
|
@IsString({ each: true })
|
||||||
|
indicators?: IndicatorType[];
|
||||||
|
}
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
import { Controller, Get, Param, Query } from '@nestjs/common';
|
||||||
|
import { ApiTags, ApiOperation, ApiParam, ApiResponse } from '@nestjs/swagger';
|
||||||
|
import { IndicatorsService } from './indicators.service';
|
||||||
|
import { GetIndicatorsDto } from './dto/indicator.dto';
|
||||||
|
|
||||||
|
@ApiTags('技术指标')
|
||||||
|
@Controller('indicators')
|
||||||
|
export class IndicatorsController {
|
||||||
|
constructor(private readonly indicatorsService: IndicatorsService) {}
|
||||||
|
|
||||||
|
@Get(':symbol')
|
||||||
|
@ApiOperation({ summary: '获取技术指标' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
async getIndicators(
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
@Query() dto: GetIndicatorsDto,
|
||||||
|
) {
|
||||||
|
const results = await this.indicatorsService.calculateAllIndicators(
|
||||||
|
symbol,
|
||||||
|
dto.period,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 如果指定了特定指标，只返回这些指标
|
||||||
|
if (dto.indicators && dto.indicators.length > 0) {
|
||||||
|
const filtered: any = {};
|
||||||
|
dto.indicators.forEach((ind) => {
|
||||||
|
if (results[ind]) {
|
||||||
|
filtered[ind] = results[ind];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return filtered;
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get(':symbol/macd')
|
||||||
|
@ApiOperation({ summary: '获取MACD指标' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
async getMACD(
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
@Query('period') period: string = '1d',
|
||||||
|
) {
|
||||||
|
const klineData = await this.indicatorsService['marketService'].getKlineData(
|
||||||
|
symbol,
|
||||||
|
period,
|
||||||
|
200,
|
||||||
|
);
|
||||||
|
return this.indicatorsService.calculateMACD(klineData);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get(':symbol/rsi')
|
||||||
|
@ApiOperation({ summary: '获取RSI指标' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
async getRSI(
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
@Query('period') period: string = '1d',
|
||||||
|
@Query('rsiPeriod') rsiPeriod: number = 14,
|
||||||
|
) {
|
||||||
|
const klineData = await this.indicatorsService['marketService'].getKlineData(
|
||||||
|
symbol,
|
||||||
|
period,
|
||||||
|
200,
|
||||||
|
);
|
||||||
|
return this.indicatorsService.calculateRSI(klineData, rsiPeriod);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get(':symbol/bollinger')
|
||||||
|
@ApiOperation({ summary: '获取布林带指标' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
async getBollinger(
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
@Query('period') period: string = '1d',
|
||||||
|
) {
|
||||||
|
const klineData = await this.indicatorsService['marketService'].getKlineData(
|
||||||
|
symbol,
|
||||||
|
period,
|
||||||
|
200,
|
||||||
|
);
|
||||||
|
return this.indicatorsService.calculateBollinger(klineData);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get(':symbol/kdj')
|
||||||
|
@ApiOperation({ summary: '获取KDJ指标' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
async getKDJ(
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
@Query('period') period: string = '1d',
|
||||||
|
) {
|
||||||
|
const klineData = await this.indicatorsService['marketService'].getKlineData(
|
||||||
|
symbol,
|
||||||
|
period,
|
||||||
|
200,
|
||||||
|
);
|
||||||
|
return this.indicatorsService.calculateKDJ(klineData);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { IndicatorsController } from './indicators.controller';
|
||||||
|
import { IndicatorsService } from './indicators.service';
|
||||||
|
import { MarketModule } from '../market/market.module';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [MarketModule],
|
||||||
|
controllers: [IndicatorsController],
|
||||||
|
providers: [IndicatorsService],
|
||||||
|
exports: [IndicatorsService],
|
||||||
|
})
|
||||||
|
export class IndicatorsModule {}
|
||||||
@ -0,0 +1,392 @@
|
|||||||
|
import { Injectable } from '@nestjs/common';
|
||||||
|
import { MarketService } from '../market/market.service';
|
||||||
|
import { KLineData } from '../market/interfaces/market.interface';
|
||||||
|
import {
|
||||||
|
MACDResult,
|
||||||
|
RSIResult,
|
||||||
|
BollingerResult,
|
||||||
|
KDJResult,
|
||||||
|
SARResult,
|
||||||
|
OBVResult,
|
||||||
|
DMIResult,
|
||||||
|
CCIResult,
|
||||||
|
WRResult,
|
||||||
|
IndicatorResults,
|
||||||
|
} from './interfaces/indicator.interface';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class IndicatorsService {
|
||||||
|
constructor(private readonly marketService: MarketService) {}
|
||||||
|
|
||||||
|
// 计算MACD
|
||||||
|
calculateMACD(
|
||||||
|
klineData: KLineData[],
|
||||||
|
fastPeriod = 12,
|
||||||
|
slowPeriod = 26,
|
||||||
|
signalPeriod = 9,
|
||||||
|
): MACDResult[] {
|
||||||
|
const closes = klineData.map((k) => k.close);
|
||||||
|
const ema12 = this.calculateEMA(closes, fastPeriod);
|
||||||
|
const ema26 = this.calculateEMA(closes, slowPeriod);
|
||||||
|
|
||||||
|
const dif = ema12.map((v, i) => v - ema26[i]);
|
||||||
|
const dea = this.calculateEMA(dif, signalPeriod);
|
||||||
|
const macd = dif.map((v, i) => (v - dea[i]) * 2);
|
||||||
|
|
||||||
|
return klineData.map((k, i) => ({
|
||||||
|
time: k.time,
|
||||||
|
dif: Number(dif[i].toFixed(4)),
|
||||||
|
dea: Number(dea[i].toFixed(4)),
|
||||||
|
macd: Number(macd[i].toFixed(4)),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算RSI
|
||||||
|
calculateRSI(klineData: KLineData[], period = 14): RSIResult[] {
|
||||||
|
const closes = klineData.map((k) => k.close);
|
||||||
|
const rsi = this.calculateRSIValues(closes, period);
|
||||||
|
|
||||||
|
return klineData.map((k, i) => ({
|
||||||
|
time: k.time,
|
||||||
|
value: Number(rsi[i].toFixed(2)),
|
||||||
|
status: this.getRSIStatus(rsi[i]),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算布林带
|
||||||
|
calculateBollinger(
|
||||||
|
klineData: KLineData[],
|
||||||
|
period = 20,
|
||||||
|
stdDev = 2,
|
||||||
|
): BollingerResult[] {
|
||||||
|
const closes = klineData.map((k) => k.close);
|
||||||
|
const results: BollingerResult[] = [];
|
||||||
|
|
||||||
|
for (let i = period - 1; i < closes.length; i++) {
|
||||||
|
const slice = closes.slice(i - period + 1, i + 1);
|
||||||
|
const middle = this.calculateSMA(slice, period);
|
||||||
|
const std = this.calculateStdDev(slice, middle);
|
||||||
|
const upper = middle + stdDev * std;
|
||||||
|
const lower = middle - stdDev * std;
|
||||||
|
const currentPrice = closes[i];
|
||||||
|
|
||||||
|
results.push({
|
||||||
|
time: klineData[i].time,
|
||||||
|
upper: Number(upper.toFixed(2)),
|
||||||
|
middle: Number(middle.toFixed(2)),
|
||||||
|
lower: Number(lower.toFixed(2)),
|
||||||
|
position: currentPrice > upper ? 'upper' : currentPrice < lower ? 'lower' : 'middle',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算KDJ
|
||||||
|
calculateKDJ(klineData: KLineData[], n = 9, m1 = 3, m2 = 3): KDJResult[] {
|
||||||
|
const highs = klineData.map((k) => k.high);
|
||||||
|
const lows = klineData.map((k) => k.low);
|
||||||
|
const closes = klineData.map((k) => k.close);
|
||||||
|
|
||||||
|
const rsv: number[] = [];
|
||||||
|
const k: number[] = [];
|
||||||
|
const d: number[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < closes.length; i++) {
|
||||||
|
if (i < n - 1) {
|
||||||
|
rsv.push(50);
|
||||||
|
k.push(50);
|
||||||
|
d.push(50);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const periodHighs = highs.slice(i - n + 1, i + 1);
|
||||||
|
const periodLows = lows.slice(i - n + 1, i + 1);
|
||||||
|
const highest = Math.max(...periodHighs);
|
||||||
|
const lowest = Math.min(...periodLows);
|
||||||
|
|
||||||
|
const rsvValue = highest === lowest ? 50 : ((closes[i] - lowest) / (highest - lowest)) * 100;
|
||||||
|
rsv.push(rsvValue);
|
||||||
|
|
||||||
|
const kValue = (2 / 3) * (k[i - 1] || 50) + (1 / 3) * rsvValue;
|
||||||
|
k.push(kValue);
|
||||||
|
|
||||||
|
const dValue = (2 / 3) * (d[i - 1] || 50) + (1 / 3) * kValue;
|
||||||
|
d.push(dValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
const j = k.map((kv, i) => 3 * kv - 2 * d[i]);
|
||||||
|
|
||||||
|
return klineData.map((kline, i) => ({
|
||||||
|
time: kline.time,
|
||||||
|
k: Number(k[i].toFixed(2)),
|
||||||
|
d: Number(d[i].toFixed(2)),
|
||||||
|
j: Number(j[i].toFixed(2)),
|
||||||
|
signal: this.getKDJSignal(k[i], d[i], k[i - 1], d[i - 1]),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算SAR (抛物线转向)
|
||||||
|
calculateSAR(klineData: KLineData[], af = 0.02, maxAf = 0.2): SARResult[] {
|
||||||
|
const highs = klineData.map((k) => k.high);
|
||||||
|
const lows = klineData.map((k) => k.low);
|
||||||
|
const results: SARResult[] = [];
|
||||||
|
|
||||||
|
let isLong = true;
|
||||||
|
let sar = lows[0];
|
||||||
|
let ep = highs[0];
|
||||||
|
let afValue = af;
|
||||||
|
|
||||||
|
for (let i = 1; i < klineData.length; i++) {
|
||||||
|
sar = sar + afValue * (ep - sar);
|
||||||
|
|
||||||
|
if (isLong) {
|
||||||
|
if (lows[i] < sar) {
|
||||||
|
isLong = false;
|
||||||
|
sar = ep;
|
||||||
|
ep = lows[i];
|
||||||
|
afValue = af;
|
||||||
|
} else {
|
||||||
|
if (highs[i] > ep) {
|
||||||
|
ep = highs[i];
|
||||||
|
afValue = Math.min(afValue + af, maxAf);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (highs[i] > sar) {
|
||||||
|
isLong = true;
|
||||||
|
sar = ep;
|
||||||
|
ep = highs[i];
|
||||||
|
afValue = af;
|
||||||
|
} else {
|
||||||
|
if (lows[i] < ep) {
|
||||||
|
ep = lows[i];
|
||||||
|
afValue = Math.min(afValue + af, maxAf);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
results.push({
|
||||||
|
time: klineData[i].time,
|
||||||
|
value: Number(sar.toFixed(2)),
|
||||||
|
isLong,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算OBV
|
||||||
|
calculateOBV(klineData: KLineData[]): OBVResult[] {
|
||||||
|
const obv: number[] = [0];
|
||||||
|
|
||||||
|
for (let i = 1; i < klineData.length; i++) {
|
||||||
|
const prevClose = klineData[i - 1].close;
|
||||||
|
const currentClose = klineData[i].close;
|
||||||
|
const volume = klineData[i].volume;
|
||||||
|
|
||||||
|
if (currentClose > prevClose) {
|
||||||
|
obv.push(obv[i - 1] + volume);
|
||||||
|
} else if (currentClose < prevClose) {
|
||||||
|
obv.push(obv[i - 1] - volume);
|
||||||
|
} else {
|
||||||
|
obv.push(obv[i - 1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return klineData.map((k, i) => ({
|
||||||
|
time: k.time,
|
||||||
|
value: obv[i],
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算DMI
|
||||||
|
calculateDMI(klineData: KLineData[], period = 14): DMIResult[] {
|
||||||
|
const highs = klineData.map((k) => k.high);
|
||||||
|
const lows = klineData.map((k) => k.low);
|
||||||
|
const closes = klineData.map((k) => k.close);
|
||||||
|
|
||||||
|
const tr: number[] = [];
|
||||||
|
const plusDM: number[] = [];
|
||||||
|
const minusDM: number[] = [];
|
||||||
|
|
||||||
|
for (let i = 1; i < klineData.length; i++) {
|
||||||
|
const highDiff = highs[i] - highs[i - 1];
|
||||||
|
const lowDiff = lows[i - 1] - lows[i];
|
||||||
|
|
||||||
|
tr.push(Math.max(
|
||||||
|
highs[i] - lows[i],
|
||||||
|
Math.abs(highs[i] - closes[i - 1]),
|
||||||
|
Math.abs(lows[i] - closes[i - 1]),
|
||||||
|
));
|
||||||
|
|
||||||
|
plusDM.push(highDiff > lowDiff && highDiff > 0 ? highDiff : 0);
|
||||||
|
minusDM.push(lowDiff > highDiff && lowDiff > 0 ? lowDiff : 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
const atr = this.calculateEMA(tr, period);
|
||||||
|
const plusDI = this.calculateEMA(plusDM, period).map((v, i) => (v / atr[i]) * 100);
|
||||||
|
const minusDI = this.calculateEMA(minusDM, period).map((v, i) => (v / atr[i]) * 100);
|
||||||
|
const dx = plusDI.map((v, i) => Math.abs(v - minusDI[i]) / (v + minusDI[i]) * 100);
|
||||||
|
const adx = this.calculateEMA(dx, period);
|
||||||
|
|
||||||
|
return klineData.slice(1).map((k, i) => ({
|
||||||
|
time: k.time,
|
||||||
|
plusDI: Number(plusDI[i].toFixed(2)),
|
||||||
|
minusDI: Number(minusDI[i].toFixed(2)),
|
||||||
|
adx: Number(adx[i].toFixed(2)),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算CCI
|
||||||
|
calculateCCI(klineData: KLineData[], period = 14): CCIResult[] {
|
||||||
|
const results: CCIResult[] = [];
|
||||||
|
|
||||||
|
for (let i = period - 1; i < klineData.length; i++) {
|
||||||
|
const tp = klineData.slice(i - period + 1, i + 1).map(
|
||||||
|
(k) => (k.high + k.low + k.close) / 3,
|
||||||
|
);
|
||||||
|
const smaTP = tp.reduce((a, b) => a + b, 0) / period;
|
||||||
|
const meanDeviation = tp.reduce((a, b) => a + Math.abs(b - smaTP), 0) / period;
|
||||||
|
const cci = (tp[tp.length - 1] - smaTP) / (0.015 * meanDeviation);
|
||||||
|
|
||||||
|
results.push({
|
||||||
|
time: klineData[i].time,
|
||||||
|
value: Number(cci.toFixed(2)),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算WR (威廉指标)
|
||||||
|
calculateWR(klineData: KLineData[], period = 14): WRResult[] {
|
||||||
|
const results: WRResult[] = [];
|
||||||
|
|
||||||
|
for (let i = period - 1; i < klineData.length; i++) {
|
||||||
|
const periodData = klineData.slice(i - period + 1, i + 1);
|
||||||
|
const highest = Math.max(...periodData.map((k) => k.high));
|
||||||
|
const lowest = Math.min(...periodData.map((k) => k.low));
|
||||||
|
const close = klineData[i].close;
|
||||||
|
|
||||||
|
const wr = highest === lowest ? -50 : ((highest - close) / (highest - lowest)) * -100;
|
||||||
|
|
||||||
|
results.push({
|
||||||
|
time: klineData[i].time,
|
||||||
|
value: Number(wr.toFixed(2)),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算移动平均线
|
||||||
|
calculateMA(klineData: KLineData[], period: number): { time: string; value: number }[] {
|
||||||
|
const closes = klineData.map((k) => k.close);
|
||||||
|
const ma = this.calculateSMAArray(closes, period);
|
||||||
|
|
||||||
|
return klineData.slice(period - 1).map((k, i) => ({
|
||||||
|
time: k.time,
|
||||||
|
value: Number(ma[i].toFixed(2)),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有指标
|
||||||
|
async calculateAllIndicators(
|
||||||
|
symbol: string,
|
||||||
|
period: string,
|
||||||
|
): Promise<IndicatorResults> {
|
||||||
|
const klineData = await this.marketService.getKlineData(symbol, period, 200);
|
||||||
|
|
||||||
|
return {
|
||||||
|
macd: this.calculateMACD(klineData),
|
||||||
|
rsi: this.calculateRSI(klineData),
|
||||||
|
bollinger: this.calculateBollinger(klineData),
|
||||||
|
kdj: this.calculateKDJ(klineData),
|
||||||
|
sar: this.calculateSAR(klineData),
|
||||||
|
obv: this.calculateOBV(klineData),
|
||||||
|
dmi: this.calculateDMI(klineData),
|
||||||
|
cci: this.calculateCCI(klineData),
|
||||||
|
wr: this.calculateWR(klineData),
|
||||||
|
ma5: this.calculateMA(klineData, 5),
|
||||||
|
ma10: this.calculateMA(klineData, 10),
|
||||||
|
ma20: this.calculateMA(klineData, 20),
|
||||||
|
ma60: this.calculateMA(klineData, 60),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 辅助方法
|
||||||
|
private calculateEMA(data: number[], period: number): number[] {
|
||||||
|
const k = 2 / (period + 1);
|
||||||
|
const ema: number[] = [data[0]];
|
||||||
|
|
||||||
|
for (let i = 1; i < data.length; i++) {
|
||||||
|
ema.push(data[i] * k + ema[i - 1] * (1 - k));
|
||||||
|
}
|
||||||
|
|
||||||
|
return ema;
|
||||||
|
}
|
||||||
|
|
||||||
|
private calculateSMA(data: number[], period: number): number {
|
||||||
|
const sum = data.slice(-period).reduce((a, b) => a + b, 0);
|
||||||
|
return sum / period;
|
||||||
|
}
|
||||||
|
|
||||||
|
private calculateSMAArray(data: number[], period: number): number[] {
|
||||||
|
const sma: number[] = [];
|
||||||
|
for (let i = period - 1; i < data.length; i++) {
|
||||||
|
const sum = data.slice(i - period + 1, i + 1).reduce((a, b) => a + b, 0);
|
||||||
|
sma.push(sum / period);
|
||||||
|
}
|
||||||
|
return sma;
|
||||||
|
}
|
||||||
|
|
||||||
|
private calculateStdDev(data: number[], mean: number): number {
|
||||||
|
const squareDiffs = data.map((value) => Math.pow(value - mean, 2));
|
||||||
|
const avgSquareDiff = squareDiffs.reduce((a, b) => a + b, 0) / data.length;
|
||||||
|
return Math.sqrt(avgSquareDiff);
|
||||||
|
}
|
||||||
|
|
||||||
|
private calculateRSIValues(closes: number[], period: number): number[] {
|
||||||
|
const gains: number[] = [];
|
||||||
|
const losses: number[] = [];
|
||||||
|
|
||||||
|
for (let i = 1; i < closes.length; i++) {
|
||||||
|
const change = closes[i] - closes[i - 1];
|
||||||
|
gains.push(change > 0 ? change : 0);
|
||||||
|
losses.push(change < 0 ? Math.abs(change) : 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
const rsi: number[] = [];
|
||||||
|
let avgGain = gains.slice(0, period).reduce((a, b) => a + b, 0) / period;
|
||||||
|
let avgLoss = losses.slice(0, period).reduce((a, b) => a + b, 0) / period;
|
||||||
|
|
||||||
|
for (let i = period; i < gains.length; i++) {
|
||||||
|
avgGain = (avgGain * (period - 1) + gains[i]) / period;
|
||||||
|
avgLoss = (avgLoss * (period - 1) + losses[i]) / period;
|
||||||
|
|
||||||
|
const rs = avgGain / avgLoss;
|
||||||
|
rsi.push(100 - 100 / (1 + rs));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 填充前面的数据
|
||||||
|
return [...Array(period).fill(50), ...rsi];
|
||||||
|
}
|
||||||
|
|
||||||
|
private getRSIStatus(rsi: number): 'overbought' | 'oversold' | 'normal' {
|
||||||
|
if (rsi > 70) return 'overbought';
|
||||||
|
if (rsi < 30) return 'oversold';
|
||||||
|
return 'normal';
|
||||||
|
}
|
||||||
|
|
||||||
|
private getKDJSignal(
|
||||||
|
k: number,
|
||||||
|
d: number,
|
||||||
|
prevK: number,
|
||||||
|
prevD: number,
|
||||||
|
): 'golden_cross' | 'dead_cross' | 'neutral' {
|
||||||
|
if (prevK < prevD && k > d) return 'golden_cross';
|
||||||
|
if (prevK > prevD && k < d) return 'dead_cross';
|
||||||
|
return 'neutral';
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
export interface MACDResult {
|
||||||
|
time: string;
|
||||||
|
dif: number;
|
||||||
|
dea: number;
|
||||||
|
macd: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RSIResult {
|
||||||
|
time: string;
|
||||||
|
value: number;
|
||||||
|
status: 'overbought' | 'oversold' | 'normal';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface BollingerResult {
|
||||||
|
time: string;
|
||||||
|
upper: number;
|
||||||
|
middle: number;
|
||||||
|
lower: number;
|
||||||
|
position: 'upper' | 'middle' | 'lower';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KDJResult {
|
||||||
|
time: string;
|
||||||
|
k: number;
|
||||||
|
d: number;
|
||||||
|
j: number;
|
||||||
|
signal: 'golden_cross' | 'dead_cross' | 'neutral';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SARResult {
|
||||||
|
time: string;
|
||||||
|
value: number;
|
||||||
|
isLong: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OBVResult {
|
||||||
|
time: string;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DMIResult {
|
||||||
|
time: string;
|
||||||
|
plusDI: number;
|
||||||
|
minusDI: number;
|
||||||
|
adx: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CCIResult {
|
||||||
|
time: string;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WRResult {
|
||||||
|
time: string;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MAResult {
|
||||||
|
time: string;
|
||||||
|
value: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IndicatorResults {
|
||||||
|
macd: MACDResult[];
|
||||||
|
rsi: RSIResult[];
|
||||||
|
bollinger: BollingerResult[];
|
||||||
|
kdj: KDJResult[];
|
||||||
|
sar: SARResult[];
|
||||||
|
obv: OBVResult[];
|
||||||
|
dmi: DMIResult[];
|
||||||
|
cci: CCIResult[];
|
||||||
|
wr: WRResult[];
|
||||||
|
ma5: MAResult[];
|
||||||
|
ma10: MAResult[];
|
||||||
|
ma20: MAResult[];
|
||||||
|
ma60: MAResult[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type IndicatorType =
|
||||||
|
| 'macd'
|
||||||
|
| 'rsi'
|
||||||
|
| 'bollinger'
|
||||||
|
| 'kdj'
|
||||||
|
| 'sar'
|
||||||
|
| 'obv'
|
||||||
|
| 'dmi'
|
||||||
|
| 'cci'
|
||||||
|
| 'wr'
|
||||||
|
| 'ma5'
|
||||||
|
| 'ma10'
|
||||||
|
| 'ma20'
|
||||||
|
| 'ma60';
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
import { NestFactory } from '@nestjs/core';
|
||||||
|
import { ValidationPipe, VersioningType } from '@nestjs/common';
|
||||||
|
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import helmet from 'helmet';
|
||||||
|
import * as compression from 'compression';
|
||||||
|
import { AppModule } from './app.module';
|
||||||
|
|
||||||
|
async function bootstrap() {
|
||||||
|
const app = await NestFactory.create(AppModule);
|
||||||
|
const configService = app.get(ConfigService);
|
||||||
|
|
||||||
|
// 安全中间件
|
||||||
|
app.use(helmet({
|
||||||
|
contentSecurityPolicy: {
|
||||||
|
directives: {
|
||||||
|
defaultSrc: ["'self'"],
|
||||||
|
styleSrc: ["'self'", "'unsafe-inline'"],
|
||||||
|
scriptSrc: ["'self'"],
|
||||||
|
imgSrc: ["'self'", "data:", "https:"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 压缩响应
|
||||||
|
app.use(compression());
|
||||||
|
|
||||||
|
// CORS配置
|
||||||
|
app.enableCors({
|
||||||
|
origin: configService.get('CORS_ORIGIN') || true,
|
||||||
|
credentials: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// API版本控制
|
||||||
|
app.enableVersioning({
|
||||||
|
type: VersioningType.URI,
|
||||||
|
defaultVersion: '1',
|
||||||
|
prefix: 'api/v',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 全局验证管道
|
||||||
|
app.useGlobalPipes(new ValidationPipe({
|
||||||
|
whitelist: true,
|
||||||
|
forbidNonWhitelisted: true,
|
||||||
|
transform: true,
|
||||||
|
transformOptions: {
|
||||||
|
enableImplicitConversion: true,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
// API前缀
|
||||||
|
app.setGlobalPrefix(configService.get('API_PREFIX') || 'api/v1');
|
||||||
|
|
||||||
|
// Swagger文档
|
||||||
|
const config = new DocumentBuilder()
|
||||||
|
.setTitle('智能期货期权分析系统 API')
|
||||||
|
.setDescription('提供行情数据、技术分析、期权定价等功能的RESTful API')
|
||||||
|
.setVersion('1.0.0')
|
||||||
|
.addBearerAuth()
|
||||||
|
.addTag('认证', '用户登录注册')
|
||||||
|
.addTag('行情', '期货行情数据')
|
||||||
|
.addTag('指标', '技术分析指标')
|
||||||
|
.addTag('期权', '期权分析与定价')
|
||||||
|
.addTag('AI', '智能分析')
|
||||||
|
.addTag('事件', '热点事件')
|
||||||
|
.addTag('用户', '用户管理')
|
||||||
|
.build();
|
||||||
|
|
||||||
|
const document = SwaggerModule.createDocument(app, config);
|
||||||
|
SwaggerModule.setup('docs', app, document);
|
||||||
|
|
||||||
|
// 启动服务器
|
||||||
|
const port = configService.get('PORT') || 3000;
|
||||||
|
await app.listen(port);
|
||||||
|
|
||||||
|
console.log(`🚀 服务已启动: http://localhost:${port}`);
|
||||||
|
console.log(`📚 API文档: http://localhost:${port}/docs`);
|
||||||
|
console.log(`📊 环境: ${configService.get('NODE_ENV')}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
bootstrap();
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
import { IsString, IsOptional, IsInt, Min, Max, IsEnum } from 'class-validator';
|
||||||
|
import { Type } from 'class-transformer';
|
||||||
|
import { ApiProperty } from '@nestjs/swagger';
|
||||||
|
|
||||||
|
export class GetProductsDto {
|
||||||
|
@ApiProperty({ required: false, description: '品种分类' })
|
||||||
|
@IsOptional()
|
||||||
|
@IsString()
|
||||||
|
category?: string;
|
||||||
|
|
||||||
|
@ApiProperty({ required: false, default: 1, description: '页码' })
|
||||||
|
@IsOptional()
|
||||||
|
@Type(() => Number)
|
||||||
|
@IsInt()
|
||||||
|
@Min(1)
|
||||||
|
page?: number = 1;
|
||||||
|
|
||||||
|
@ApiProperty({ required: false, default: 20, description: '每页数量' })
|
||||||
|
@IsOptional()
|
||||||
|
@Type(() => Number)
|
||||||
|
@IsInt()
|
||||||
|
@Min(1)
|
||||||
|
@Max(100)
|
||||||
|
size?: number = 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class GetKlineDto {
|
||||||
|
@ApiProperty({ description: '周期', enum: ['1m', '5m', '15m', '30m', '1h', '1d', '1w'] })
|
||||||
|
@IsString()
|
||||||
|
@IsEnum(['1m', '5m', '15m', '30m', '1h', '1d', '1w'])
|
||||||
|
period: string;
|
||||||
|
|
||||||
|
@ApiProperty({ required: false, default: 100, description: '返回条数' })
|
||||||
|
@IsOptional()
|
||||||
|
@Type(() => Number)
|
||||||
|
@IsInt()
|
||||||
|
@Min(1)
|
||||||
|
@Max(1000)
|
||||||
|
count?: number = 100;
|
||||||
|
|
||||||
|
@ApiProperty({ required: false, description: '开始时间 (ISO8601)' })
|
||||||
|
@IsOptional()
|
||||||
|
@IsString()
|
||||||
|
startTime?: string;
|
||||||
|
|
||||||
|
@ApiProperty({ required: false, description: '结束时间 (ISO8601)' })
|
||||||
|
@IsOptional()
|
||||||
|
@IsString()
|
||||||
|
endTime?: string;
|
||||||
|
}
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
|
||||||
|
import { JwtService } from '@nestjs/jwt';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import { WsException } from '@nestjs/websockets';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class WsJwtGuard implements CanActivate {
|
||||||
|
constructor(
|
||||||
|
private readonly jwtService: JwtService,
|
||||||
|
private readonly configService: ConfigService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async canActivate(context: ExecutionContext): Promise<boolean> {
|
||||||
|
try {
|
||||||
|
const client = context.switchToWs().getClient();
|
||||||
|
const token = this.extractToken(client);
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
throw new WsException('未提供认证令牌');
|
||||||
|
}
|
||||||
|
|
||||||
|
const payload = this.jwtService.verify(token, {
|
||||||
|
secret: this.configService.get('jwt.secret'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将用户信息附加到客户端
|
||||||
|
client.user = payload;
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
throw new WsException('无效的认证令牌');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private extractToken(client: any): string | null {
|
||||||
|
// 从handshake auth中获取token
|
||||||
|
const auth = client.handshake?.auth?.token;
|
||||||
|
if (auth) return auth.replace('Bearer ', '');
|
||||||
|
|
||||||
|
// 从query中获取token
|
||||||
|
const token = client.handshake?.query?.token;
|
||||||
|
if (token) return token as string;
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
export interface Product {
|
||||||
|
id: string;
|
||||||
|
symbol: string;
|
||||||
|
name: string;
|
||||||
|
category: string;
|
||||||
|
price: number;
|
||||||
|
change: number;
|
||||||
|
changePercent: number;
|
||||||
|
open: number;
|
||||||
|
high: number;
|
||||||
|
low: number;
|
||||||
|
volume: number;
|
||||||
|
openInterest?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KLineData {
|
||||||
|
time: string;
|
||||||
|
open: number;
|
||||||
|
high: number;
|
||||||
|
low: number;
|
||||||
|
close: number;
|
||||||
|
volume: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TickData {
|
||||||
|
symbol: string;
|
||||||
|
price: number;
|
||||||
|
change: number;
|
||||||
|
changePercent: number;
|
||||||
|
open: number;
|
||||||
|
high: number;
|
||||||
|
low: number;
|
||||||
|
volume: number;
|
||||||
|
openInterest?: number;
|
||||||
|
bidPrice?: number;
|
||||||
|
askPrice?: number;
|
||||||
|
bidVolume?: number;
|
||||||
|
askVolume?: number;
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MarketOverview {
|
||||||
|
heatIndex: number;
|
||||||
|
heatChange: number;
|
||||||
|
upCount: number;
|
||||||
|
downCount: number;
|
||||||
|
capitalFlow: number;
|
||||||
|
volatilityIndex: number;
|
||||||
|
volatilityChange: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WebSocketMessage {
|
||||||
|
type: 'tick' | 'kline' | 'trade' | 'signal';
|
||||||
|
symbol: string;
|
||||||
|
data: any;
|
||||||
|
timestamp: number;
|
||||||
|
}
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
import { Injectable, Logger, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import { Cron, CronExpression } from '@nestjs/schedule';
|
||||||
|
import { MarketService } from './market.service';
|
||||||
|
import { MarketGateway } from './market.gateway';
|
||||||
|
import { PrismaService } from '@common/prisma/prisma.service';
|
||||||
|
import { TickData, KLineData } from './interfaces/market.interface';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class MarketDataFeedService implements OnModuleInit, OnModuleDestroy {
|
||||||
|
private readonly logger = new Logger(MarketDataFeedService.name);
|
||||||
|
private readonly mockSymbols = ['SC', 'AU', 'CU', 'AG', 'I', 'M', 'P', 'EC'];
|
||||||
|
private mockDataInterval: NodeJS.Timeout;
|
||||||
|
private isRunning = false;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private readonly configService: ConfigService,
|
||||||
|
private readonly marketService: MarketService,
|
||||||
|
private readonly marketGateway: MarketGateway,
|
||||||
|
private readonly prisma: PrismaService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async onModuleInit() {
|
||||||
|
// 启动模拟数据feed
|
||||||
|
const provider = this.configService.get('marketData.provider');
|
||||||
|
|
||||||
|
if (provider === 'mock') {
|
||||||
|
this.startMockDataFeed();
|
||||||
|
this.logger.log('📊 启动模拟行情数据服务');
|
||||||
|
} else {
|
||||||
|
// TODO: 实现真实数据源连接
|
||||||
|
this.logger.log(`📊 使用数据源: ${provider}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onModuleDestroy() {
|
||||||
|
this.stopMockDataFeed();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 启动模拟数据推送
|
||||||
|
private startMockDataFeed() {
|
||||||
|
if (this.isRunning) return;
|
||||||
|
|
||||||
|
this.isRunning = true;
|
||||||
|
const interval = this.configService.get('marketData.tickUpdateInterval') || 1000;
|
||||||
|
|
||||||
|
this.mockDataInterval = setInterval(() => {
|
||||||
|
this.generateAndBroadcastMockData();
|
||||||
|
}, interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 停止模拟数据推送
|
||||||
|
private stopMockDataFeed() {
|
||||||
|
this.isRunning = false;
|
||||||
|
if (this.mockDataInterval) {
|
||||||
|
clearInterval(this.mockDataInterval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成并广播模拟数据
|
||||||
|
private async generateAndBroadcastMockData() {
|
||||||
|
for (const symbol of this.mockSymbols) {
|
||||||
|
try {
|
||||||
|
const tick = await this.generateMockTick(symbol);
|
||||||
|
|
||||||
|
// 存储到Redis
|
||||||
|
await this.marketService.storeTickData(symbol, tick);
|
||||||
|
|
||||||
|
// 广播给订阅的客户端
|
||||||
|
this.marketGateway.broadcastTick(symbol, tick);
|
||||||
|
} catch (error) {
|
||||||
|
this.logger.error(`生成模拟数据失败 ${symbol}:`, error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定时推送市场概览
|
||||||
|
@Cron(CronExpression.EVERY_30_SECONDS)
|
||||||
|
async broadcastMarketOverview() {
|
||||||
|
try {
|
||||||
|
const overview = await this.marketService.getMarketOverview();
|
||||||
|
this.marketGateway.broadcastMarketOverview(overview);
|
||||||
|
} catch (error) {
|
||||||
|
this.logger.error('广播市场概览失败:', error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成模拟Tick数据
|
||||||
|
private async generateMockTick(symbol: string): Promise<TickData> {
|
||||||
|
// 获取当前价格或生成基础价格
|
||||||
|
const currentTick = await this.marketService.getTickData(symbol).catch(() => null);
|
||||||
|
let basePrice = 500;
|
||||||
|
|
||||||
|
if (currentTick) {
|
||||||
|
basePrice = currentTick.price;
|
||||||
|
} else {
|
||||||
|
// 根据品种设置不同的基础价格
|
||||||
|
const basePrices: Record<string, number> = {
|
||||||
|
SC: 528.6, // 原油
|
||||||
|
AU: 685.2, // 黄金
|
||||||
|
CU: 80610, // 铜
|
||||||
|
AG: 8250, // 白银
|
||||||
|
I: 785.5, // 铁矿石
|
||||||
|
M: 2985, // 豆粕
|
||||||
|
P: 8750, // 棕榈油
|
||||||
|
EC: 2150, // 集运指数
|
||||||
|
};
|
||||||
|
basePrice = basePrices[symbol] || 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 随机波动 (0.1% - 0.5%)
|
||||||
|
const volatility = basePrice * (0.001 + Math.random() * 0.004);
|
||||||
|
const change = (Math.random() - 0.5) * volatility;
|
||||||
|
const price = basePrice + change;
|
||||||
|
|
||||||
|
return {
|
||||||
|
symbol,
|
||||||
|
price: Number(price.toFixed(2)),
|
||||||
|
change: Number(change.toFixed(2)),
|
||||||
|
changePercent: Number(((change / basePrice) * 100).toFixed(2)),
|
||||||
|
open: currentTick?.open || basePrice,
|
||||||
|
high: Math.max(currentTick?.high || price, price) * (1 + Math.random() * 0.001),
|
||||||
|
low: Math.min(currentTick?.low || price, price) * (1 - Math.random() * 0.001),
|
||||||
|
volume: Math.floor(Math.random() * 10000) + (currentTick?.volume || 0),
|
||||||
|
openInterest: Math.floor(Math.random() * 100000),
|
||||||
|
bidPrice: price - 0.1,
|
||||||
|
askPrice: price + 0.1,
|
||||||
|
bidVolume: Math.floor(Math.random() * 100),
|
||||||
|
askVolume: Math.floor(Math.random() * 100),
|
||||||
|
timestamp: Date.now(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成模拟K线数据
|
||||||
|
async generateMockKline(symbol: string, period: string, count: number = 100): Promise<KLineData[]> {
|
||||||
|
const data: KLineData[] = [];
|
||||||
|
const product = await this.prisma.product.findUnique({
|
||||||
|
where: { symbol },
|
||||||
|
});
|
||||||
|
|
||||||
|
let basePrice = 500;
|
||||||
|
if (product) {
|
||||||
|
const tick = await this.marketService.getTickData(symbol);
|
||||||
|
basePrice = tick.price;
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const periodMinutes = this.parsePeriod(period);
|
||||||
|
|
||||||
|
for (let i = count; i >= 0; i--) {
|
||||||
|
const time = new Date(now.getTime() - i * periodMinutes * 60 * 1000);
|
||||||
|
const volatility = basePrice * 0.008;
|
||||||
|
const change = (Math.random() - 0.48) * volatility;
|
||||||
|
|
||||||
|
const open = basePrice;
|
||||||
|
const close = basePrice + change;
|
||||||
|
const high = Math.max(open, close) + Math.random() * volatility * 0.5;
|
||||||
|
const low = Math.min(open, close) - Math.random() * volatility * 0.5;
|
||||||
|
const volume = Math.floor(Math.random() * 10000 + 5000);
|
||||||
|
|
||||||
|
data.push({
|
||||||
|
time: time.toISOString(),
|
||||||
|
open: Number(open.toFixed(2)),
|
||||||
|
high: Number(high.toFixed(2)),
|
||||||
|
low: Number(low.toFixed(2)),
|
||||||
|
close: Number(close.toFixed(2)),
|
||||||
|
volume,
|
||||||
|
});
|
||||||
|
|
||||||
|
basePrice = close;
|
||||||
|
}
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
private parsePeriod(period: string): number {
|
||||||
|
const periodMap: Record<string, number> = {
|
||||||
|
'1m': 1,
|
||||||
|
'5m': 5,
|
||||||
|
'15m': 15,
|
||||||
|
'30m': 30,
|
||||||
|
'1h': 60,
|
||||||
|
'1d': 60 * 24,
|
||||||
|
'1w': 60 * 24 * 7,
|
||||||
|
};
|
||||||
|
return periodMap[period] || 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
import { Controller, Get, Param, Query } from '@nestjs/common';
|
||||||
|
import { ApiTags, ApiOperation, ApiResponse, ApiParam } from '@nestjs/swagger';
|
||||||
|
import { MarketService } from './market.service';
|
||||||
|
import { GetProductsDto, GetKlineDto } from './dto/market.dto';
|
||||||
|
|
||||||
|
@ApiTags('行情')
|
||||||
|
@Controller('market')
|
||||||
|
export class MarketController {
|
||||||
|
constructor(private readonly marketService: MarketService) {}
|
||||||
|
|
||||||
|
@Get('products')
|
||||||
|
@ApiOperation({ summary: '获取品种列表' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
async getProducts(@Query() dto: GetProductsDto) {
|
||||||
|
return this.marketService.getProducts(dto.category, dto.page, dto.size);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('products/:symbol')
|
||||||
|
@ApiOperation({ summary: '获取品种详情' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
@ApiResponse({ status: 404, description: '品种不存在' })
|
||||||
|
async getProduct(@Param('symbol') symbol: string) {
|
||||||
|
return this.marketService.getProduct(symbol);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('products/:symbol/kline')
|
||||||
|
@ApiOperation({ summary: '获取K线数据' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
async getKline(
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
@Query() dto: GetKlineDto,
|
||||||
|
) {
|
||||||
|
return this.marketService.getKlineData(
|
||||||
|
symbol,
|
||||||
|
dto.period,
|
||||||
|
dto.count,
|
||||||
|
dto.startTime ? new Date(dto.startTime) : undefined,
|
||||||
|
dto.endTime ? new Date(dto.endTime) : undefined,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('products/:symbol/tick')
|
||||||
|
@ApiOperation({ summary: '获取实时行情' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
async getTick(@Param('symbol') symbol: string) {
|
||||||
|
return this.marketService.getTickData(symbol);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get('overview')
|
||||||
|
@ApiOperation({ summary: '获取市场概览' })
|
||||||
|
@ApiResponse({ status: 200, description: '获取成功' })
|
||||||
|
async getOverview() {
|
||||||
|
return this.marketService.getMarketOverview();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
import {
|
||||||
|
WebSocketGateway,
|
||||||
|
WebSocketServer,
|
||||||
|
SubscribeMessage,
|
||||||
|
MessageBody,
|
||||||
|
ConnectedSocket,
|
||||||
|
OnGatewayConnection,
|
||||||
|
OnGatewayDisconnect,
|
||||||
|
} from '@nestjs/websockets';
|
||||||
|
import { Server, Socket } from 'socket.io';
|
||||||
|
import { Logger, UseGuards } from '@nestjs/common';
|
||||||
|
import { ConfigService } from '@nestjs/config';
|
||||||
|
import { MarketService } from './market.service';
|
||||||
|
import { WsJwtGuard } from './guards/ws-jwt.guard';
|
||||||
|
|
||||||
|
interface SubscribeMessageData {
|
||||||
|
symbols: string[];
|
||||||
|
channels: ('tick' | 'kline' | 'depth')[];
|
||||||
|
}
|
||||||
|
|
||||||
|
@WebSocketGateway({
|
||||||
|
namespace: 'market',
|
||||||
|
cors: {
|
||||||
|
origin: '*',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export class MarketGateway implements OnGatewayConnection, OnGatewayDisconnect {
|
||||||
|
@WebSocketServer()
|
||||||
|
server: Server;
|
||||||
|
|
||||||
|
private readonly logger = new Logger(MarketGateway.name);
|
||||||
|
private clientSubscriptions: Map<string, Set<string>> = new Map(); // clientId -> symbols
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private readonly configService: ConfigService,
|
||||||
|
private readonly marketService: MarketService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
handleConnection(client: Socket) {
|
||||||
|
this.logger.log(`客户端连接: ${client.id}`);
|
||||||
|
this.clientSubscriptions.set(client.id, new Set());
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDisconnect(client: Socket) {
|
||||||
|
this.logger.log(`客户端断开: ${client.id}`);
|
||||||
|
this.clientSubscriptions.delete(client.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
@SubscribeMessage('subscribe')
|
||||||
|
async handleSubscribe(
|
||||||
|
@MessageBody() data: SubscribeMessageData,
|
||||||
|
@ConnectedSocket() client: Socket,
|
||||||
|
) {
|
||||||
|
const { symbols, channels } = data;
|
||||||
|
const subscriptions = this.clientSubscriptions.get(client.id) || new Set();
|
||||||
|
|
||||||
|
symbols.forEach((symbol) => {
|
||||||
|
subscriptions.add(symbol);
|
||||||
|
|
||||||
|
// 加入品种房间
|
||||||
|
client.join(`symbol:${symbol}`);
|
||||||
|
|
||||||
|
// 根据频道加入对应房间
|
||||||
|
channels.forEach((channel) => {
|
||||||
|
client.join(`${channel}:${symbol}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.clientSubscriptions.set(client.id, subscriptions);
|
||||||
|
|
||||||
|
// 发送当前数据
|
||||||
|
const ticks = await this.marketService.getBatchTicks(symbols);
|
||||||
|
|
||||||
|
client.emit('subscribed', {
|
||||||
|
symbols,
|
||||||
|
channels,
|
||||||
|
initialData: ticks,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.logger.log(`客户端 ${client.id} 订阅: ${symbols.join(', ')}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
@SubscribeMessage('unsubscribe')
|
||||||
|
handleUnsubscribe(
|
||||||
|
@MessageBody() data: { symbols: string[] },
|
||||||
|
@ConnectedSocket() client: Socket,
|
||||||
|
) {
|
||||||
|
const { symbols } = data;
|
||||||
|
const subscriptions = this.clientSubscriptions.get(client.id) || new Set();
|
||||||
|
|
||||||
|
symbols.forEach((symbol) => {
|
||||||
|
subscriptions.delete(symbol);
|
||||||
|
client.leave(`symbol:${symbol}`);
|
||||||
|
client.leave(`tick:${symbol}`);
|
||||||
|
client.leave(`kline:${symbol}`);
|
||||||
|
client.leave(`depth:${symbol}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.clientSubscriptions.set(client.id, subscriptions);
|
||||||
|
client.emit('unsubscribed', { symbols });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 广播Tick数据
|
||||||
|
broadcastTick(symbol: string, data: any) {
|
||||||
|
this.server.to(`tick:${symbol}`).emit('tick', {
|
||||||
|
symbol,
|
||||||
|
data,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 广播K线数据
|
||||||
|
broadcastKline(symbol: string, period: string, data: any) {
|
||||||
|
this.server.to(`kline:${symbol}`).emit('kline', {
|
||||||
|
symbol,
|
||||||
|
period,
|
||||||
|
data,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 广播市场概览
|
||||||
|
broadcastMarketOverview(data: any) {
|
||||||
|
this.server.emit('market:overview', {
|
||||||
|
data,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取在线客户端数量
|
||||||
|
getConnectedClientsCount(): number {
|
||||||
|
return this.clientSubscriptions.size;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { MarketController } from './market.controller';
|
||||||
|
import { MarketService } from './market.service';
|
||||||
|
import { MarketGateway } from './market.gateway';
|
||||||
|
import { MarketDataFeedService } from './market-data-feed.service';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
controllers: [MarketController],
|
||||||
|
providers: [MarketService, MarketGateway, MarketDataFeedService],
|
||||||
|
exports: [MarketService],
|
||||||
|
})
|
||||||
|
export class MarketModule {}
|
||||||
@ -0,0 +1,257 @@
|
|||||||
|
import { Injectable, NotFoundException } from '@nestjs/common';
|
||||||
|
import { PrismaService } from '@common/prisma/prisma.service';
|
||||||
|
import { RedisService } from '@common/redis/redis.service';
|
||||||
|
import { KLineData, TickData, MarketOverview, Product } from './interfaces/market.interface';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class MarketService {
|
||||||
|
constructor(
|
||||||
|
private readonly prisma: PrismaService,
|
||||||
|
private readonly redis: RedisService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
// 获取品种列表
|
||||||
|
async getProducts(category?: string, page = 1, size = 20): Promise<{ list: Product[]; total: number }> {
|
||||||
|
const where = category && category !== 'all' ? { category } : {};
|
||||||
|
|
||||||
|
const [products, total] = await Promise.all([
|
||||||
|
this.prisma.product.findMany({
|
||||||
|
where,
|
||||||
|
skip: (page - 1) * size,
|
||||||
|
take: size,
|
||||||
|
orderBy: { id: 'asc' },
|
||||||
|
}),
|
||||||
|
this.prisma.product.count({ where }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 合并Redis中的实时数据
|
||||||
|
const list = await Promise.all(
|
||||||
|
products.map(async (product) => {
|
||||||
|
const tick = await this.redis.getTick(product.symbol);
|
||||||
|
return this.mergeProductWithTick(product, tick);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
return { list, total };
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取单个品种详情
|
||||||
|
async getProduct(symbol: string): Promise<Product> {
|
||||||
|
const product = await this.prisma.product.findUnique({
|
||||||
|
where: { symbol: symbol.toUpperCase() },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!product) {
|
||||||
|
throw new NotFoundException(`品种 ${symbol} 不存在`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const tick = await this.redis.getTick(product.symbol);
|
||||||
|
return this.mergeProductWithTick(product, tick);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取K线数据
|
||||||
|
async getKlineData(
|
||||||
|
symbol: string,
|
||||||
|
period: string,
|
||||||
|
count = 100,
|
||||||
|
startTime?: Date,
|
||||||
|
endTime?: Date,
|
||||||
|
): Promise<KLineData[]> {
|
||||||
|
const product = await this.prisma.product.findUnique({
|
||||||
|
where: { symbol: symbol.toUpperCase() },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!product) {
|
||||||
|
throw new NotFoundException(`品种 ${symbol} 不存在`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 优先从Redis获取
|
||||||
|
const cachedKlines = await this.redis.getKlines(symbol, period, count);
|
||||||
|
if (cachedKlines.length >= count / 2) {
|
||||||
|
return cachedKlines.map((k) => JSON.parse(k)).reverse();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从数据库查询
|
||||||
|
const where: any = {
|
||||||
|
productId: product.id,
|
||||||
|
period,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (startTime) {
|
||||||
|
where.time = { ...where.time, gte: startTime };
|
||||||
|
}
|
||||||
|
if (endTime) {
|
||||||
|
where.time = { ...where.time, lte: endTime };
|
||||||
|
}
|
||||||
|
|
||||||
|
const klines = await this.prisma.klineData.findMany({
|
||||||
|
where,
|
||||||
|
orderBy: { time: 'desc' },
|
||||||
|
take: count,
|
||||||
|
});
|
||||||
|
|
||||||
|
return klines.reverse().map((k) => ({
|
||||||
|
time: k.time.toISOString(),
|
||||||
|
open: Number(k.open),
|
||||||
|
high: Number(k.high),
|
||||||
|
low: Number(k.low),
|
||||||
|
close: Number(k.close),
|
||||||
|
volume: Number(k.volume),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取实时Tick数据
|
||||||
|
async getTickData(symbol: string): Promise<TickData> {
|
||||||
|
const product = await this.prisma.product.findUnique({
|
||||||
|
where: { symbol: symbol.toUpperCase() },
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!product) {
|
||||||
|
throw new NotFoundException(`品种 ${symbol} 不存在`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const tick = await this.redis.getTick(symbol);
|
||||||
|
|
||||||
|
if (!tick || Object.keys(tick).length === 0) {
|
||||||
|
// 如果没有缓存数据，返回模拟数据
|
||||||
|
return this.generateMockTick(product.symbol);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
symbol: product.symbol,
|
||||||
|
price: parseFloat(tick.price) || 0,
|
||||||
|
change: parseFloat(tick.change) || 0,
|
||||||
|
changePercent: parseFloat(tick.changePercent) || 0,
|
||||||
|
open: parseFloat(tick.open) || 0,
|
||||||
|
high: parseFloat(tick.high) || 0,
|
||||||
|
low: parseFloat(tick.low) || 0,
|
||||||
|
volume: parseInt(tick.volume) || 0,
|
||||||
|
openInterest: tick.openInterest ? parseInt(tick.openInterest) : undefined,
|
||||||
|
bidPrice: tick.bidPrice ? parseFloat(tick.bidPrice) : undefined,
|
||||||
|
askPrice: tick.askPrice ? parseFloat(tick.askPrice) : undefined,
|
||||||
|
bidVolume: tick.bidVolume ? parseInt(tick.bidVolume) : undefined,
|
||||||
|
askVolume: tick.askVolume ? parseInt(tick.askVolume) : undefined,
|
||||||
|
timestamp: parseInt(tick.timestamp) || Date.now(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取市场概览
|
||||||
|
async getMarketOverview(): Promise<MarketOverview> {
|
||||||
|
const products = await this.prisma.product.findMany();
|
||||||
|
const ticks = await Promise.all(
|
||||||
|
products.map((p) => this.redis.getTick(p.symbol)),
|
||||||
|
);
|
||||||
|
|
||||||
|
const validTicks = ticks.filter((t) => t && t.price);
|
||||||
|
|
||||||
|
let upCount = 0;
|
||||||
|
let downCount = 0;
|
||||||
|
let totalChange = 0;
|
||||||
|
let totalVolume = 0;
|
||||||
|
|
||||||
|
validTicks.forEach((tick) => {
|
||||||
|
const change = parseFloat(tick.change) || 0;
|
||||||
|
if (change > 0) upCount++;
|
||||||
|
else if (change < 0) downCount++;
|
||||||
|
totalChange += Math.abs(change);
|
||||||
|
totalVolume += parseInt(tick.volume) || 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计算市场热度指数 (0-100)
|
||||||
|
const heatIndex = validTicks.length > 0
|
||||||
|
? Math.min(100, Math.max(0, 50 + (upCount - downCount) * 2))
|
||||||
|
: 50;
|
||||||
|
|
||||||
|
// 计算波动率指数 (基于涨跌幅标准差)
|
||||||
|
const volatilityIndex = validTicks.length > 0
|
||||||
|
? (totalChange / validTicks.length) * 10
|
||||||
|
: 20;
|
||||||
|
|
||||||
|
return {
|
||||||
|
heatIndex: Number(heatIndex.toFixed(1)),
|
||||||
|
heatChange: Number(((Math.random() - 0.5) * 10).toFixed(1)),
|
||||||
|
upCount,
|
||||||
|
downCount,
|
||||||
|
capitalFlow: Number((totalVolume / 10000).toFixed(1)),
|
||||||
|
volatilityIndex: Number(volatilityIndex.toFixed(1)),
|
||||||
|
volatilityChange: Number(((Math.random() - 0.5) * 5).toFixed(1)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 批量获取Tick数据
|
||||||
|
async getBatchTicks(symbols: string[]): Promise<Record<string, TickData>> {
|
||||||
|
const result: Record<string, TickData> = {};
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
symbols.map(async (symbol) => {
|
||||||
|
try {
|
||||||
|
result[symbol] = await this.getTickData(symbol);
|
||||||
|
} catch (error) {
|
||||||
|
// 忽略不存在的品种
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 存储Tick数据
|
||||||
|
async storeTickData(symbol: string, data: TickData): Promise<void> {
|
||||||
|
await this.redis.setTick(symbol, {
|
||||||
|
price: data.price.toString(),
|
||||||
|
change: data.change.toString(),
|
||||||
|
changePercent: data.changePercent.toString(),
|
||||||
|
open: data.open.toString(),
|
||||||
|
high: data.high.toString(),
|
||||||
|
low: data.low.toString(),
|
||||||
|
volume: data.volume.toString(),
|
||||||
|
openInterest: data.openInterest?.toString(),
|
||||||
|
bidPrice: data.bidPrice?.toString(),
|
||||||
|
askPrice: data.askPrice?.toString(),
|
||||||
|
bidVolume: data.bidVolume?.toString(),
|
||||||
|
askVolume: data.askVolume?.toString(),
|
||||||
|
timestamp: data.timestamp.toString(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 存储K线数据
|
||||||
|
async storeKlineData(symbol: string, period: string, data: KLineData): Promise<void> {
|
||||||
|
await this.redis.addKline(symbol, period, JSON.stringify(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
private mergeProductWithTick(product: any, tick: Record<string, string>): Product {
|
||||||
|
const basePrice = 500; // 基础价格，实际应从历史数据获取
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: product.id.toString(),
|
||||||
|
symbol: product.symbol,
|
||||||
|
name: product.name,
|
||||||
|
category: product.category,
|
||||||
|
price: tick.price ? parseFloat(tick.price) : basePrice,
|
||||||
|
change: tick.change ? parseFloat(tick.change) : 0,
|
||||||
|
changePercent: tick.changePercent ? parseFloat(tick.changePercent) : 0,
|
||||||
|
open: tick.open ? parseFloat(tick.open) : basePrice,
|
||||||
|
high: tick.high ? parseFloat(tick.high) : basePrice,
|
||||||
|
low: tick.low ? parseFloat(tick.low) : basePrice,
|
||||||
|
volume: tick.volume ? parseInt(tick.volume) : 0,
|
||||||
|
openInterest: tick.openInterest ? parseInt(tick.openInterest) : 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private generateMockTick(symbol: string): TickData {
|
||||||
|
const basePrice = 500;
|
||||||
|
const change = (Math.random() - 0.5) * 20;
|
||||||
|
|
||||||
|
return {
|
||||||
|
symbol,
|
||||||
|
price: basePrice + change,
|
||||||
|
change,
|
||||||
|
changePercent: (change / basePrice) * 100,
|
||||||
|
open: basePrice,
|
||||||
|
high: basePrice + Math.abs(change) + 10,
|
||||||
|
low: basePrice - Math.abs(change) - 10,
|
||||||
|
volume: Math.floor(Math.random() * 100000),
|
||||||
|
timestamp: Date.now(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import { IsString, IsNumber, IsEnum, IsOptional, IsDateString } from 'class-validator';
|
||||||
|
import { ApiProperty } from '@nestjs/swagger';
|
||||||
|
|
||||||
|
export class OptionPricingDto {
|
||||||
|
@ApiProperty({ description: '标的资产代码' })
|
||||||
|
@IsString()
|
||||||
|
underlying: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '行权价' })
|
||||||
|
@IsNumber()
|
||||||
|
strike: number;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '到期日 (YYYY-MM-DD)' })
|
||||||
|
@IsDateString()
|
||||||
|
expiry: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '期权类型', enum: ['call', 'put'] })
|
||||||
|
@IsEnum(['call', 'put'])
|
||||||
|
type: 'call' | 'put';
|
||||||
|
|
||||||
|
@ApiProperty({ description: '标的资产价格', required: false })
|
||||||
|
@IsOptional()
|
||||||
|
@IsNumber()
|
||||||
|
underlyingPrice?: number;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '波动率 (如 0.25 表示 25%)', required: false })
|
||||||
|
@IsOptional()
|
||||||
|
@IsNumber()
|
||||||
|
volatility?: number;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '无风险利率 (如 0.025 表示 2.5%)', required: false })
|
||||||
|
@IsOptional()
|
||||||
|
@IsNumber()
|
||||||
|
riskFreeRate?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class GetOptionChainDto {
|
||||||
|
@ApiProperty({ description: '到期日 (YYYY-MM-DD)', required: false })
|
||||||
|
@IsOptional()
|
||||||
|
@IsDateString()
|
||||||
|
expiry?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class CalculateStrategyDto {
|
||||||
|
@ApiProperty({ description: '策略名称', example: 'long_call_spread' })
|
||||||
|
@IsString()
|
||||||
|
strategy: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '标的资产代码' })
|
||||||
|
@IsString()
|
||||||
|
underlying: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '到期日 (YYYY-MM-DD)' })
|
||||||
|
@IsDateString()
|
||||||
|
expiry: string;
|
||||||
|
|
||||||
|
@ApiProperty({ description: '行权价差', type: [Number] })
|
||||||
|
strikes: number[];
|
||||||
|
}
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
// 期权希腊值
|
||||||
|
export interface Greeks {
|
||||||
|
delta: number;
|
||||||
|
gamma: number;
|
||||||
|
theta: number;
|
||||||
|
vega: number;
|
||||||
|
rho: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 期权定价结果
|
||||||
|
export interface OptionPricingResult extends Greeks {
|
||||||
|
price: number;
|
||||||
|
impliedVol?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 期权合约
|
||||||
|
export interface OptionContract {
|
||||||
|
symbol: string;
|
||||||
|
underlying: string;
|
||||||
|
type: 'call' | 'put';
|
||||||
|
strikePrice: number;
|
||||||
|
expiryDate: string;
|
||||||
|
price?: number;
|
||||||
|
iv?: number;
|
||||||
|
delta?: number;
|
||||||
|
gamma?: number;
|
||||||
|
theta?: number;
|
||||||
|
vega?: number;
|
||||||
|
rho?: number;
|
||||||
|
volume?: number;
|
||||||
|
openInterest?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 期权链
|
||||||
|
export interface OptionChain {
|
||||||
|
underlying: string;
|
||||||
|
underlyingPrice: number;
|
||||||
|
expiryDate: string;
|
||||||
|
strikes: number[];
|
||||||
|
calls: OptionContract[];
|
||||||
|
puts: OptionContract[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 波动率曲面数据点
|
||||||
|
export interface VolatilityPoint {
|
||||||
|
strike: number;
|
||||||
|
expiry: string;
|
||||||
|
iv: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 波动率曲面
|
||||||
|
export interface VolatilitySurface {
|
||||||
|
underlying: string;
|
||||||
|
points: VolatilityPoint[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 期权策略
|
||||||
|
export interface OptionStrategy {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
legs: StrategyLeg[];
|
||||||
|
maxProfit?: number;
|
||||||
|
maxLoss?: number;
|
||||||
|
breakeven: number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StrategyLeg {
|
||||||
|
type: 'call' | 'put';
|
||||||
|
strike: number;
|
||||||
|
expiry: string;
|
||||||
|
position: 1 | -1; // 1 for buy, -1 for sell
|
||||||
|
quantity: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 策略盈亏分析
|
||||||
|
export interface StrategyPayoff {
|
||||||
|
pricePoints: number[];
|
||||||
|
payoffs: number[];
|
||||||
|
maxProfit: number;
|
||||||
|
maxLoss: number;
|
||||||
|
breakeven: number[];
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { OptionsController } from './options.controller';
|
||||||
|
import { OptionsService } from './options.service';
|
||||||
|
import { MarketModule } from '../market/market.module';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [MarketModule],
|
||||||
|
controllers: [OptionsController],
|
||||||
|
providers: [OptionsService],
|
||||||
|
exports: [OptionsService],
|
||||||
|
})
|
||||||
|
export class OptionsModule {}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { Controller, Get, UseGuards } from '@nestjs/common';
|
||||||
|
import { ApiTags, ApiBearerAuth } from '@nestjs/swagger';
|
||||||
|
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
|
||||||
|
import { CurrentUser } from '../auth/decorators/current-user.decorator';
|
||||||
|
import { UserService } from './user.service';
|
||||||
|
|
||||||
|
@ApiTags('用户')
|
||||||
|
@Controller('user')
|
||||||
|
@UseGuards(JwtAuthGuard)
|
||||||
|
@ApiBearerAuth()
|
||||||
|
export class UserController {
|
||||||
|
constructor(private readonly userService: UserService) {}
|
||||||
|
|
||||||
|
@Get('stats')
|
||||||
|
async getUserStats(@CurrentUser('userId') userId: number) {
|
||||||
|
return this.userService.getUserStats(userId);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { UserController } from './user.controller';
|
||||||
|
import { UserService } from './user.service';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
controllers: [UserController],
|
||||||
|
providers: [UserService],
|
||||||
|
exports: [UserService],
|
||||||
|
})
|
||||||
|
export class UserModule {}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { Injectable } from '@nestjs/common';
|
||||||
|
import { PrismaService } from '@common/prisma/prisma.service';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class UserService {
|
||||||
|
constructor(private readonly prisma: PrismaService) {}
|
||||||
|
|
||||||
|
async getUserStats(userId: number) {
|
||||||
|
const [watchlistCount, alertCount] = await Promise.all([
|
||||||
|
this.prisma.watchlist.count({ where: { userId } }),
|
||||||
|
this.prisma.priceAlert.count({ where: { userId } }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
watchlistCount,
|
||||||
|
alertCount,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import {
|
||||||
|
Controller,
|
||||||
|
Get,
|
||||||
|
Post,
|
||||||
|
Delete,
|
||||||
|
Put,
|
||||||
|
Body,
|
||||||
|
Param,
|
||||||
|
Query,
|
||||||
|
UseGuards,
|
||||||
|
} from '@nestjs/common';
|
||||||
|
import { ApiTags, ApiOperation, ApiBearerAuth, ApiParam } from '@nestjs/swagger';
|
||||||
|
import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
|
||||||
|
import { CurrentUser } from '../auth/decorators/current-user.decorator';
|
||||||
|
import { WatchlistService } from './watchlist.service';
|
||||||
|
|
||||||
|
@ApiTags('自选股')
|
||||||
|
@Controller('watchlist')
|
||||||
|
@UseGuards(JwtAuthGuard)
|
||||||
|
@ApiBearerAuth()
|
||||||
|
export class WatchlistController {
|
||||||
|
constructor(private readonly watchlistService: WatchlistService) {}
|
||||||
|
|
||||||
|
@Get()
|
||||||
|
@ApiOperation({ summary: '获取自选股列表' })
|
||||||
|
async getWatchlist(@CurrentUser('userId') userId: number) {
|
||||||
|
return this.watchlistService.getWatchlist(userId);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Post()
|
||||||
|
@ApiOperation({ summary: '添加自选股' })
|
||||||
|
async addToWatchlist(
|
||||||
|
@CurrentUser('userId') userId: number,
|
||||||
|
@Body() dto: { symbol: string; alertPrice?: number },
|
||||||
|
) {
|
||||||
|
return this.watchlistService.addToWatchlist(
|
||||||
|
userId,
|
||||||
|
dto.symbol,
|
||||||
|
dto.alertPrice,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Delete(':symbol')
|
||||||
|
@ApiOperation({ summary: '删除自选股' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
async removeFromWatchlist(
|
||||||
|
@CurrentUser('userId') userId: number,
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
) {
|
||||||
|
await this.watchlistService.removeFromWatchlist(userId, symbol);
|
||||||
|
return { message: '删除成功' };
|
||||||
|
}
|
||||||
|
|
||||||
|
@Put(':symbol/alert')
|
||||||
|
@ApiOperation({ summary: '更新价格预警' })
|
||||||
|
@ApiParam({ name: 'symbol', description: '品种代码' })
|
||||||
|
async updateAlertPrice(
|
||||||
|
@CurrentUser('userId') userId: number,
|
||||||
|
@Param('symbol') symbol: string,
|
||||||
|
@Body() dto: { alertPrice: number },
|
||||||
|
) {
|
||||||
|
return this.watchlistService.updateAlertPrice(
|
||||||
|
userId,
|
||||||
|
symbol,
|
||||||
|
dto.alertPrice,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { WatchlistController } from './watchlist.controller';
|
||||||
|
import { WatchlistService } from './watchlist.service';
|
||||||
|
import { MarketModule } from '../market/market.module';
|
||||||
|
|
||||||
|
@Module({
|
||||||
|
imports: [MarketModule],
|
||||||
|
controllers: [WatchlistController],
|
||||||
|
providers: [WatchlistService],
|
||||||
|
exports: [WatchlistService],
|
||||||
|
})
|
||||||
|
export class WatchlistModule {}
|
||||||
@ -0,0 +1,149 @@
|
|||||||
|
import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
|
||||||
|
import { PrismaService } from '@common/prisma/prisma.service';
|
||||||
|
import { MarketService } from '../market/market.service';
|
||||||
|
|
||||||
|
export interface WatchlistItem {
|
||||||
|
id: string;
|
||||||
|
symbol: string;
|
||||||
|
name: string;
|
||||||
|
price: number;
|
||||||
|
change: number;
|
||||||
|
changePercent: number;
|
||||||
|
alertPrice?: number;
|
||||||
|
addTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class WatchlistService {
|
||||||
|
constructor(
|
||||||
|
private readonly prisma: PrismaService,
|
||||||
|
private readonly marketService: MarketService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
async getWatchlist(userId: number): Promise<WatchlistItem[]> {
|
||||||
|
const items = await this.prisma.watchlist.findMany({
|
||||||
|
where: { userId },
|
||||||
|
orderBy: { createdAt: 'desc' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const result: WatchlistItem[] = [];
|
||||||
|
|
||||||
|
for (const item of items) {
|
||||||
|
try {
|
||||||
|
const product = await this.marketService.getProduct(item.symbol);
|
||||||
|
result.push({
|
||||||
|
id: item.id.toString(),
|
||||||
|
symbol: item.symbol,
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
change: product.change,
|
||||||
|
changePercent: product.changePercent,
|
||||||
|
alertPrice: item.alertPrice ? Number(item.alertPrice) : undefined,
|
||||||
|
addTime: item.createdAt.toISOString(),
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
// 如果品种不存在，跳过
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
async addToWatchlist(
|
||||||
|
userId: number,
|
||||||
|
symbol: string,
|
||||||
|
alertPrice?: number,
|
||||||
|
): Promise<WatchlistItem> {
|
||||||
|
// 检查品种是否存在
|
||||||
|
const product = await this.marketService.getProduct(symbol);
|
||||||
|
|
||||||
|
// 检查是否已存在
|
||||||
|
const existing = await this.prisma.watchlist.findUnique({
|
||||||
|
where: {
|
||||||
|
userId_symbol: {
|
||||||
|
userId,
|
||||||
|
symbol: symbol.toUpperCase(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
throw new ConflictException('该品种已在自选股中');
|
||||||
|
}
|
||||||
|
|
||||||
|
const item = await this.prisma.watchlist.create({
|
||||||
|
data: {
|
||||||
|
userId,
|
||||||
|
symbol: symbol.toUpperCase(),
|
||||||
|
alertPrice: alertPrice || null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: item.id.toString(),
|
||||||
|
symbol: item.symbol,
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
change: product.change,
|
||||||
|
changePercent: product.changePercent,
|
||||||
|
alertPrice: item.alertPrice ? Number(item.alertPrice) : undefined,
|
||||||
|
addTime: item.createdAt.toISOString(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async removeFromWatchlist(userId: number, symbol: string): Promise<void> {
|
||||||
|
const item = await this.prisma.watchlist.findUnique({
|
||||||
|
where: {
|
||||||
|
userId_symbol: {
|
||||||
|
userId,
|
||||||
|
symbol: symbol.toUpperCase(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!item) {
|
||||||
|
throw new NotFoundException('该品种不在自选股中');
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.prisma.watchlist.delete({
|
||||||
|
where: { id: item.id },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateAlertPrice(
|
||||||
|
userId: number,
|
||||||
|
symbol: string,
|
||||||
|
alertPrice: number,
|
||||||
|
): Promise<WatchlistItem> {
|
||||||
|
const item = await this.prisma.watchlist.findUnique({
|
||||||
|
where: {
|
||||||
|
userId_symbol: {
|
||||||
|
userId,
|
||||||
|
symbol: symbol.toUpperCase(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!item) {
|
||||||
|
throw new NotFoundException('该品种不在自选股中');
|
||||||
|
}
|
||||||
|
|
||||||
|
const updated = await this.prisma.watchlist.update({
|
||||||
|
where: { id: item.id },
|
||||||
|
data: { alertPrice },
|
||||||
|
});
|
||||||
|
|
||||||
|
const product = await this.marketService.getProduct(symbol);
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: updated.id.toString(),
|
||||||
|
symbol: updated.symbol,
|
||||||
|
name: product.name,
|
||||||
|
price: product.price,
|
||||||
|
change: product.change,
|
||||||
|
changePercent: product.changePercent,
|
||||||
|
alertPrice: updated.alertPrice ? Number(updated.alertPrice) : undefined,
|
||||||
|
addTime: updated.createdAt.toISOString(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs",
|
||||||
|
"declaration": true,
|
||||||
|
"removeComments": true,
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"target": "ES2021",
|
||||||
|
"sourceMap": true,
|
||||||
|
"outDir": "./dist",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"incremental": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strictNullChecks": false,
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"strictBindCallApply": false,
|
||||||
|
"forceConsistentCasingInFileNames": false,
|
||||||
|
"noFallthroughCasesInSwitch": false,
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"],
|
||||||
|
"@config/*": ["src/config/*"],
|
||||||
|
"@common/*": ["src/common/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
#root {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.react:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
a:nth-of-type(2) .logo {
|
||||||
|
animation: logo-spin infinite 20s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Flame, TrendingUp, TrendingDown, Minus, AlertTriangle, ChevronRight, Calendar, Target } from 'lucide-react';
|
||||||
|
import type { HotEvent } from '@/types';
|
||||||
|
|
||||||
|
interface HotEventsProps {
|
||||||
|
events: HotEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 影响等级星级
|
||||||
|
function ImpactStars({ level }: { level: number }) {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-0.5">
|
||||||
|
{Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`w-4 h-4 rounded-sm ${i < level ? 'bg-[#7dd75a]' : 'bg-[#3f3f46]'}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 影响方向图标
|
||||||
|
function ImpactBadge({ impact }: { impact: 'bullish' | 'bearish' | 'neutral' }) {
|
||||||
|
const config = {
|
||||||
|
bullish: { icon: TrendingUp, text: '利多', color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10' },
|
||||||
|
bearish: { icon: TrendingDown, text: '利空', color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10' },
|
||||||
|
neutral: { icon: Minus, text: '中性', color: 'text-[#a1a1aa]', bg: 'bg-[#a1a1aa]/10' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const { icon: Icon, text, color, bg } = config[impact];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-1 px-2 py-1 rounded-md ${bg}`}>
|
||||||
|
<Icon className={`w-3 h-3 ${color}`} />
|
||||||
|
<span className={`text-xs font-medium ${color}`}>{text}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HotEventsPanel({ events }: HotEventsProps) {
|
||||||
|
const [selectedEvent, setSelectedEvent] = useState<HotEvent>(events[0]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
||||||
|
{/* 事件列表 */}
|
||||||
|
<div className="lg:col-span-3 space-y-3">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Flame className="w-5 h-5 text-[#7dd75a]" />
|
||||||
|
<h3 className="text-lg font-semibold text-white">热点事件</h3>
|
||||||
|
<span className="text-xs text-[#a1a1aa] ml-auto">共 {events.length} 条</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{events.map((event) => (
|
||||||
|
<div
|
||||||
|
key={event.id}
|
||||||
|
onClick={() => setSelectedEvent(event)}
|
||||||
|
className={`p-4 rounded-xl border cursor-pointer transition-all duration-200 ${
|
||||||
|
selectedEvent?.id === event.id
|
||||||
|
? 'border-[#7dd75a] bg-[#7dd75a]/5'
|
||||||
|
: 'border-[#27272a] bg-[#0d0d10] hover:border-[#3f3f46]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<h4 className="font-medium text-white">{event.title}</h4>
|
||||||
|
<ImpactBadge impact={event.impact} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-[#a1a1aa] mb-3 line-clamp-2">{event.summary}</p>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 text-xs">
|
||||||
|
<div className="flex items-center gap-1 text-[#71717a]">
|
||||||
|
<Calendar className="w-3 h-3" />
|
||||||
|
<span>{event.time}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Target className="w-3 h-3 text-[#71717a]" />
|
||||||
|
<span className="text-[#71717a]">影响:</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{event.affectedProducts.slice(0, 3).map((product) => (
|
||||||
|
<span
|
||||||
|
key={product}
|
||||||
|
className="px-1.5 py-0.5 rounded bg-[#27272a] text-[#e6e6e6]"
|
||||||
|
>
|
||||||
|
{product}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{event.affectedProducts.length > 3 && (
|
||||||
|
<span className="text-[#71717a]">+{event.affectedProducts.length - 3}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-end gap-2">
|
||||||
|
<ImpactStars level={event.impactLevel} />
|
||||||
|
<ChevronRight className={`w-4 h-4 transition-transform ${
|
||||||
|
selectedEvent?.id === event.id ? 'text-[#7dd75a] rotate-90' : 'text-[#71717a]'
|
||||||
|
}`} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 事件分析面板 */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="sticky top-4 p-5 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
{selectedEvent ? (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="p-2 rounded-lg bg-[#7dd75a]/10">
|
||||||
|
<AlertTriangle className="w-4 h-4 text-[#7dd75a]" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-white">智能分析</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm text-[#a1a1aa] mb-2">事件解读</h4>
|
||||||
|
<p className="text-sm text-white leading-relaxed">{selectedEvent.analysis}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm text-[#a1a1aa] mb-2">影响品种</h4>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{selectedEvent.affectedProducts.map((product) => (
|
||||||
|
<span
|
||||||
|
key={product}
|
||||||
|
className={`px-3 py-1.5 rounded-lg text-sm font-medium ${
|
||||||
|
selectedEvent.impact === 'bullish'
|
||||||
|
? 'bg-[#7dd75a]/10 text-[#7dd75a]'
|
||||||
|
: selectedEvent.impact === 'bearish'
|
||||||
|
? 'bg-[#ef4444]/10 text-[#ef4444]'
|
||||||
|
: 'bg-[#a1a1aa]/10 text-[#a1a1aa]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{product}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm text-[#a1a1aa] mb-2">风险提示</h4>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{selectedEvent.risks.map((risk, index) => (
|
||||||
|
<li key={index} className="flex items-start gap-2 text-sm text-[#e6e6e6]">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-[#f59e0b] mt-1.5 flex-shrink-0" />
|
||||||
|
<span>{risk}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4 border-t border-[#27272a]">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-[#a1a1aa]">影响强度</span>
|
||||||
|
<ImpactStars level={selectedEvent.impactLevel} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="text-center py-8 text-[#71717a]">
|
||||||
|
<AlertTriangle className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
||||||
|
<p>选择事件查看分析</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,373 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import type { KLineData, MACDData } from '@/types';
|
||||||
|
|
||||||
|
interface KLineChartProps {
|
||||||
|
klineData: KLineData[];
|
||||||
|
macdData: MACDData[];
|
||||||
|
resistance: number[];
|
||||||
|
support: number[];
|
||||||
|
height?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function KLineChart({ klineData, macdData, resistance, support, height = 500 }: KLineChartProps) {
|
||||||
|
const chartRef = useRef<HTMLDivElement>(null);
|
||||||
|
const chartInstance = useRef<echarts.ECharts | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!chartRef.current || klineData.length === 0) return;
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
if (!chartInstance.current) {
|
||||||
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
const chart = chartInstance.current;
|
||||||
|
|
||||||
|
// 处理数据
|
||||||
|
const dates = klineData.map(d => {
|
||||||
|
const date = new Date(d.time);
|
||||||
|
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const klineValues = klineData.map(d => [d.open, d.close, d.low, d.high]);
|
||||||
|
const volumes = klineData.map(d => d.volume);
|
||||||
|
|
||||||
|
// MACD数据
|
||||||
|
const difData = macdData.map(d => d.dif);
|
||||||
|
const deaData = macdData.map(d => d.dea);
|
||||||
|
const macdBarData = macdData.map(d => ({
|
||||||
|
value: d.macd,
|
||||||
|
itemStyle: {
|
||||||
|
color: d.macd >= 0 ? '#7dd75a' : '#ef4444',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 生成关键点位线
|
||||||
|
const markLines: any[] = [];
|
||||||
|
|
||||||
|
// 压力位
|
||||||
|
resistance.forEach((price, index) => {
|
||||||
|
markLines.push({
|
||||||
|
yAxis: price,
|
||||||
|
name: `压力${index + 1}`,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ef4444',
|
||||||
|
type: 'solid',
|
||||||
|
width: 1.5,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: `压力{${index + 1}}: {c}`,
|
||||||
|
color: '#ef4444',
|
||||||
|
fontSize: 11,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 支撑位
|
||||||
|
support.forEach((price, index) => {
|
||||||
|
markLines.push({
|
||||||
|
yAxis: price,
|
||||||
|
name: `支撑${index + 1}`,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#7dd75a',
|
||||||
|
type: 'solid',
|
||||||
|
width: 1.5,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: `支撑{${index + 1}}: {c}`,
|
||||||
|
color: '#7dd75a',
|
||||||
|
fontSize: 11,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计算MA
|
||||||
|
const calculateMA = (dayCount: number) => {
|
||||||
|
const result: number[] = [];
|
||||||
|
for (let i = 0; i < klineData.length; i++) {
|
||||||
|
if (i < dayCount - 1) {
|
||||||
|
result.push(Number(klineData[i].close.toFixed(2)));
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
let sum = 0;
|
||||||
|
for (let j = 0; j < dayCount; j++) {
|
||||||
|
sum += klineData[i - j].close;
|
||||||
|
}
|
||||||
|
result.push(Number((sum / dayCount).toFixed(2)));
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ma5 = calculateMA(5);
|
||||||
|
const ma10 = calculateMA(10);
|
||||||
|
const ma20 = calculateMA(20);
|
||||||
|
|
||||||
|
const option: echarts.EChartsOption = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
animation: true,
|
||||||
|
animationDuration: 500,
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#0d5d1b',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(9, 9, 11, 0.95)',
|
||||||
|
borderColor: '#7dd75a',
|
||||||
|
borderWidth: 1,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
formatter: (params: any) => {
|
||||||
|
const kline = params.find((p: any) => p.seriesName === 'K线');
|
||||||
|
const vol = params.find((p: any) => p.seriesName === '成交量');
|
||||||
|
const macd = params.find((p: any) => p.seriesName === 'MACD');
|
||||||
|
|
||||||
|
if (!kline) return '';
|
||||||
|
|
||||||
|
const data = kline.data;
|
||||||
|
const open = data[1];
|
||||||
|
const close = data[2];
|
||||||
|
const low = data[3];
|
||||||
|
const high = data[4];
|
||||||
|
const change = ((close - open) / open * 100).toFixed(2);
|
||||||
|
const changeColor = close >= open ? '#7dd75a' : '#ef4444';
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div style="padding: 8px;">
|
||||||
|
<div style="font-weight: bold; margin-bottom: 8px; color: #e6e6e6;">${kline.axisValue}</div>
|
||||||
|
<div style="display: grid; grid-template-columns: auto auto; gap: 4px 16px; font-size: 12px;">
|
||||||
|
<span style="color: #a1a1aa;">开盘:</span><span style="color: #fff;">${open.toFixed(2)}</span>
|
||||||
|
<span style="color: #a1a1aa;">最高:</span><span style="color: #fff;">${high.toFixed(2)}</span>
|
||||||
|
<span style="color: #a1a1aa;">最低:</span><span style="color: #fff;">${low.toFixed(2)}</span>
|
||||||
|
<span style="color: #a1a1aa;">收盘:</span><span style="color: ${changeColor};">${close.toFixed(2)} (${change}%)</span>
|
||||||
|
${vol ? `<span style="color: #a1a1aa;">成交量:</span><span style="color: #fff;">${vol.data.toLocaleString()}</span>` : ''}
|
||||||
|
${macd ? `<span style="color: #a1a1aa;">MACD:</span><span style="color: ${macd.data >= 0 ? '#7dd75a' : '#ef4444'};">${macd.data.toFixed(4)}</span>` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
link: [{ xAxisIndex: 'all' }],
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#0d5d1b',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
left: '3%',
|
||||||
|
right: '3%',
|
||||||
|
top: '5%',
|
||||||
|
height: '50%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: '3%',
|
||||||
|
right: '3%',
|
||||||
|
top: '58%',
|
||||||
|
height: '15%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
left: '3%',
|
||||||
|
right: '3%',
|
||||||
|
top: '76%',
|
||||||
|
height: '18%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: dates,
|
||||||
|
boundaryGap: true,
|
||||||
|
axisLine: { lineStyle: { color: '#3f3f46' } },
|
||||||
|
axisLabel: { color: '#a1a1aa', fontSize: 10 },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
gridIndex: 1,
|
||||||
|
data: dates,
|
||||||
|
boundaryGap: true,
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisLabel: { show: false },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
gridIndex: 2,
|
||||||
|
data: dates,
|
||||||
|
boundaryGap: true,
|
||||||
|
axisLine: { lineStyle: { color: '#3f3f46' } },
|
||||||
|
axisLabel: { color: '#a1a1aa', fontSize: 10 },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
scale: true,
|
||||||
|
axisLine: { lineStyle: { color: '#3f3f46' } },
|
||||||
|
axisLabel: { color: '#a1a1aa', fontSize: 10 },
|
||||||
|
splitLine: { lineStyle: { color: '#27272a', type: 'dashed' } },
|
||||||
|
position: 'right',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scale: true,
|
||||||
|
gridIndex: 1,
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisLabel: { show: false },
|
||||||
|
splitLine: { show: false },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scale: true,
|
||||||
|
gridIndex: 2,
|
||||||
|
axisLine: { lineStyle: { color: '#3f3f46' } },
|
||||||
|
axisLabel: { color: '#a1a1aa', fontSize: 10 },
|
||||||
|
splitLine: { lineStyle: { color: '#27272a', type: 'dashed' } },
|
||||||
|
position: 'right',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
xAxisIndex: [0, 1, 2],
|
||||||
|
start: 50,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'slider',
|
||||||
|
xAxisIndex: [0, 1, 2],
|
||||||
|
start: 50,
|
||||||
|
end: 100,
|
||||||
|
height: 20,
|
||||||
|
bottom: 0,
|
||||||
|
borderColor: '#3f3f46',
|
||||||
|
fillerColor: 'rgba(125, 215, 90, 0.2)',
|
||||||
|
handleStyle: { color: '#7dd75a' },
|
||||||
|
textStyle: { color: '#a1a1aa' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'K线',
|
||||||
|
type: 'candlestick',
|
||||||
|
data: klineValues,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#7dd75a',
|
||||||
|
color0: '#ef4444',
|
||||||
|
borderColor: '#7dd75a',
|
||||||
|
borderColor0: '#ef4444',
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
symbol: 'none',
|
||||||
|
data: markLines,
|
||||||
|
animation: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'MA5',
|
||||||
|
type: 'line',
|
||||||
|
data: ma5,
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: { color: '#fbbf24', width: 1 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'MA10',
|
||||||
|
type: 'line',
|
||||||
|
data: ma10,
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: { color: '#60a5fa', width: 1 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'MA20',
|
||||||
|
type: 'line',
|
||||||
|
data: ma20,
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: { color: '#c084fc', width: 1 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '成交量',
|
||||||
|
type: 'bar',
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: volumes,
|
||||||
|
itemStyle: {
|
||||||
|
color: (params: any) => {
|
||||||
|
const index = params.dataIndex;
|
||||||
|
const close = klineData[index]?.close;
|
||||||
|
const open = klineData[index]?.open;
|
||||||
|
return close >= open ? 'rgba(125, 215, 90, 0.6)' : 'rgba(239, 68, 68, 0.6)';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'MACD',
|
||||||
|
type: 'bar',
|
||||||
|
xAxisIndex: 2,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
data: macdBarData,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'DIF',
|
||||||
|
type: 'line',
|
||||||
|
xAxisIndex: 2,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
data: difData,
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: { color: '#fbbf24', width: 1.5 },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'DEA',
|
||||||
|
type: 'line',
|
||||||
|
xAxisIndex: 2,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
data: deaData,
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
lineStyle: { color: '#60a5fa', width: 1.5 },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chart.setOption(option);
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
// 响应式
|
||||||
|
const handleResize = () => {
|
||||||
|
chart.resize();
|
||||||
|
};
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
};
|
||||||
|
}, [klineData, macdData, resistance, support]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
{loading && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-[#09090b]/80 z-10">
|
||||||
|
<div className="flex items-center gap-2 text-[#7dd75a]">
|
||||||
|
<div className="w-5 h-5 border-2 border-[#7dd75a] border-t-transparent rounded-full animate-spin" />
|
||||||
|
<span className="text-sm">加载中...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div ref={chartRef} style={{ height: `${height}px` }} className="w-full" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,162 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import { TrendingUp, TrendingDown, Activity, DollarSign, BarChart3, Zap } from 'lucide-react';
|
||||||
|
import type { MarketOverview } from '@/types';
|
||||||
|
|
||||||
|
interface MarketOverviewProps {
|
||||||
|
data: MarketOverview;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数字动画组件
|
||||||
|
function AnimatedNumber({ value, decimals = 1, suffix = '' }: { value: number; decimals?: number; suffix?: string }) {
|
||||||
|
const [displayValue, setDisplayValue] = useState(0);
|
||||||
|
const startTime = useRef<number | null>(null);
|
||||||
|
const duration = 1000;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const animate = (timestamp: number) => {
|
||||||
|
if (!startTime.current) startTime.current = timestamp;
|
||||||
|
const progress = Math.min((timestamp - startTime.current) / duration, 1);
|
||||||
|
const easeOut = 1 - Math.pow(1 - progress, 3);
|
||||||
|
setDisplayValue(value * easeOut);
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
startTime.current = null;
|
||||||
|
};
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span>
|
||||||
|
{displayValue.toFixed(decimals)}{suffix}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 迷你趋势图
|
||||||
|
function MiniChart({ isUp }: { isUp: boolean }) {
|
||||||
|
const points = isUp
|
||||||
|
? '0,30 10,25 20,28 30,20 40,22 50,15 60,18 70,10 80,12 90,5 100,8'
|
||||||
|
: '0,10 10,15 20,12 30,20 40,18 50,25 60,22 70,30 80,28 90,35 100,32';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 100 40" className="w-full h-10">
|
||||||
|
<polyline
|
||||||
|
fill="none"
|
||||||
|
stroke={isUp ? '#7dd75a' : '#ef4444'}
|
||||||
|
strokeWidth="2"
|
||||||
|
points={points}
|
||||||
|
/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id={`gradient-${isUp}`} x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" stopColor={isUp ? '#7dd75a' : '#ef4444'} stopOpacity="0.3" />
|
||||||
|
<stop offset="100%" stopColor={isUp ? '#7dd75a' : '#ef4444'} stopOpacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<polygon
|
||||||
|
fill={`url(#gradient-${isUp})`}
|
||||||
|
points={`${points} 100,40 0,40`}
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MarketOverviewPanel({ data }: MarketOverviewProps) {
|
||||||
|
const cards = [
|
||||||
|
{
|
||||||
|
title: '市场热度指数',
|
||||||
|
value: data.heatIndex,
|
||||||
|
change: data.heatChange,
|
||||||
|
suffix: '',
|
||||||
|
decimals: 1,
|
||||||
|
icon: Activity,
|
||||||
|
isUp: data.heatChange > 0,
|
||||||
|
description: data.heatChange > 0 ? '多头情绪高涨' : '市场情绪偏冷',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '涨跌分布',
|
||||||
|
value: data.upCount,
|
||||||
|
change: data.downCount,
|
||||||
|
suffix: '',
|
||||||
|
decimals: 0,
|
||||||
|
icon: BarChart3,
|
||||||
|
isUp: true,
|
||||||
|
description: `涨: ${data.upCount} | 跌: ${data.downCount}`,
|
||||||
|
isDistribution: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '资金流向',
|
||||||
|
value: data.capitalFlow,
|
||||||
|
change: 0,
|
||||||
|
suffix: '亿',
|
||||||
|
decimals: 1,
|
||||||
|
icon: DollarSign,
|
||||||
|
isUp: data.capitalFlow > 0,
|
||||||
|
description: data.capitalFlow > 0 ? '资金净流入' : '资金净流出',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '波动率指数',
|
||||||
|
value: data.volatilityIndex,
|
||||||
|
change: data.volatilityChange,
|
||||||
|
suffix: '',
|
||||||
|
decimals: 1,
|
||||||
|
icon: Zap,
|
||||||
|
isUp: data.volatilityChange > 0,
|
||||||
|
description: data.volatilityChange > 0 ? '波动扩大' : '波动收窄',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{cards.map((card, index) => (
|
||||||
|
<div
|
||||||
|
key={card.title}
|
||||||
|
className="bg-[#0d0d10] border border-[#27272a] rounded-xl p-5 hover:border-[#7dd75a]/50 transition-all duration-300 hover:shadow-lg hover:shadow-[#7dd75a]/5 group"
|
||||||
|
style={{
|
||||||
|
animationDelay: `${index * 100}ms`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`p-2 rounded-lg ${card.isUp ? 'bg-[#7dd75a]/10' : 'bg-[#ef4444]/10'}`}>
|
||||||
|
<card.icon className={`w-4 h-4 ${card.isUp ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`} />
|
||||||
|
</div>
|
||||||
|
<span className="text-[#a1a1aa] text-sm">{card.title}</span>
|
||||||
|
</div>
|
||||||
|
{!card.isDistribution && card.change !== 0 && (
|
||||||
|
<div className={`flex items-center gap-1 text-xs ${card.change > 0 ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`}>
|
||||||
|
{card.change > 0 ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
|
||||||
|
<span>{card.change > 0 ? '+' : ''}{card.change}%</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<span className={`text-2xl font-bold font-mono ${card.isUp ? 'text-white' : 'text-[#ef4444]'}`}>
|
||||||
|
{card.isDistribution ? (
|
||||||
|
<span className="flex items-baseline gap-2">
|
||||||
|
<span className="text-[#7dd75a]">{data.upCount}</span>
|
||||||
|
<span className="text-[#a1a1aa] text-lg">/</span>
|
||||||
|
<span className="text-[#ef4444]">{data.downCount}</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<AnimatedNumber value={card.value} decimals={card.decimals} suffix={card.suffix} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-xs text-[#a1a1aa] mb-3">{card.description}</div>
|
||||||
|
|
||||||
|
<MiniChart isUp={card.isUp} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { BarChart3, Bell, Clock, Menu, X } from 'lucide-react';
|
||||||
|
|
||||||
|
interface NavbarProps {
|
||||||
|
activeTab: string;
|
||||||
|
onTabChange: (tab: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ id: 'overview', label: '市场概览' },
|
||||||
|
{ id: 'events', label: '热点事件' },
|
||||||
|
{ id: 'products', label: '品种分析' },
|
||||||
|
{ id: 'risks', label: '风险提醒' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Navbar({ activeTab, onTabChange }: NavbarProps) {
|
||||||
|
const [currentTime, setCurrentTime] = useState(new Date());
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setCurrentTime(new Date());
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 10);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(timer);
|
||||||
|
window.removeEventListener('scroll', handleScroll);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const formatTime = (date: Date) => {
|
||||||
|
return date.toLocaleString('zh-CN', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: '2-digit',
|
||||||
|
day: '2-digit',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
||||||
|
isScrolled
|
||||||
|
? 'bg-[#09090b]/95 backdrop-blur-md shadow-lg shadow-black/20'
|
||||||
|
: 'bg-[#09090b]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 rounded-lg bg-[#7dd75a]/10">
|
||||||
|
<BarChart3 className="w-5 h-5 text-[#7dd75a]" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-white">期货智析</h1>
|
||||||
|
<p className="text-xs text-[#71717a] hidden sm:block">智能期货期权分析系统</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<div className="hidden md:flex items-center gap-1">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => onTabChange(item.id)}
|
||||||
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative ${
|
||||||
|
activeTab === item.id
|
||||||
|
? 'text-[#7dd75a]'
|
||||||
|
: 'text-[#a1a1aa] hover:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
{activeTab === item.id && (
|
||||||
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 h-0.5 bg-[#7dd75a] rounded-full" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Section */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{/* Time */}
|
||||||
|
<div className="hidden sm:flex items-center gap-2 text-sm text-[#71717a]">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
<span className="font-mono">{formatTime(currentTime)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notification */}
|
||||||
|
<button className="p-2 rounded-lg hover:bg-[#27272a] transition-colors relative">
|
||||||
|
<Bell className="w-4 h-4 text-[#a1a1aa]" />
|
||||||
|
<span className="absolute top-1 right-1 w-2 h-2 bg-[#ef4444] rounded-full" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||||
|
className="md:hidden p-2 rounded-lg hover:bg-[#27272a] transition-colors"
|
||||||
|
>
|
||||||
|
{isMobileMenuOpen ? (
|
||||||
|
<X className="w-5 h-5 text-[#a1a1aa]" />
|
||||||
|
) : (
|
||||||
|
<Menu className="w-5 h-5 text-[#a1a1aa]" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu */}
|
||||||
|
{isMobileMenuOpen && (
|
||||||
|
<div className="md:hidden border-t border-[#27272a] bg-[#09090b]/95 backdrop-blur-md">
|
||||||
|
<div className="px-4 py-3 space-y-1">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => {
|
||||||
|
onTabChange(item.id);
|
||||||
|
setIsMobileMenuOpen(false);
|
||||||
|
}}
|
||||||
|
className={`w-full px-4 py-3 rounded-lg text-left text-sm font-medium transition-all duration-200 ${
|
||||||
|
activeTab === item.id
|
||||||
|
? 'bg-[#7dd75a]/10 text-[#7dd75a]'
|
||||||
|
: 'text-[#a1a1aa] hover:bg-[#27272a] hover:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<div className="pt-3 border-t border-[#27272a] mt-3">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-[#71717a] px-4 py-2">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
<span className="font-mono">{formatTime(currentTime)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
import { TrendingUp, TrendingDown, Minus, Clock, Target, BarChart3, ChevronRight } from 'lucide-react';
|
||||||
|
import type { FuturesProduct, TrendDirection } from '@/types';
|
||||||
|
|
||||||
|
interface ProductCardProps {
|
||||||
|
product: FuturesProduct;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 趋势标签
|
||||||
|
function TrendBadge({ direction, label }: { direction: TrendDirection; label: string }) {
|
||||||
|
const config = {
|
||||||
|
up: { icon: TrendingUp, color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10', border: 'border-[#7dd75a]/30' },
|
||||||
|
down: { icon: TrendingDown, color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10', border: 'border-[#ef4444]/30' },
|
||||||
|
sideways: { icon: Minus, color: 'text-[#a1a1aa]', bg: 'bg-[#a1a1aa]/10', border: 'border-[#a1a1aa]/30' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const { icon: Icon, color, bg, border } = config[direction];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-1 px-2 py-1 rounded-md ${bg} ${border} border`}>
|
||||||
|
<Icon className={`w-3 h-3 ${color}`} />
|
||||||
|
<span className={`text-xs font-medium ${color}`}>{label}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 建议标签
|
||||||
|
function RecommendationBadge({ recommendation }: { recommendation: 'long' | 'short' | 'wait' }) {
|
||||||
|
const config = {
|
||||||
|
long: { text: '逢低做多', color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10' },
|
||||||
|
short: { text: '逢高做空', color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10' },
|
||||||
|
wait: { text: '观望等待', color: 'text-[#a1a1aa]', bg: 'bg-[#a1a1aa]/10' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const { text, color, bg } = config[recommendation];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className={`px-2 py-1 rounded-md text-xs font-medium ${color} ${bg}`}>
|
||||||
|
{text}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 成功率进度条
|
||||||
|
function SuccessRateBar({ rate }: { rate: number }) {
|
||||||
|
const getColor = (r: number) => {
|
||||||
|
if (r >= 70) return 'bg-[#7dd75a]';
|
||||||
|
if (r >= 50) return 'bg-[#f59e0b]';
|
||||||
|
return 'bg-[#ef4444]';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 h-2 bg-[#27272a] rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-full transition-all duration-500 ${getColor(rate)}`}
|
||||||
|
style={{ width: `${rate}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className={`text-xs font-medium ${rate >= 70 ? 'text-[#7dd75a]' : rate >= 50 ? 'text-[#f59e0b]' : 'text-[#ef4444]'}`}>
|
||||||
|
{rate}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProductCard({ product, onClick }: ProductCardProps) {
|
||||||
|
const isUp = product.change >= 0;
|
||||||
|
|
||||||
|
const cycleLabels: Record<string, string> = {
|
||||||
|
m5: '5分',
|
||||||
|
m15: '15分',
|
||||||
|
m30: '30分',
|
||||||
|
m60: '60分',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={onClick}
|
||||||
|
className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10] hover:border-[#7dd75a]/50 transition-all duration-300 cursor-pointer group hover:shadow-lg hover:shadow-[#7dd75a]/5"
|
||||||
|
>
|
||||||
|
{/* 头部 */}
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<h4 className="font-semibold text-white">{product.name}</h4>
|
||||||
|
<span className="text-xs text-[#71717a]">({product.code})</span>
|
||||||
|
</div>
|
||||||
|
<RecommendationBadge recommendation={product.recommendation} />
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className={`text-xl font-bold font-mono ${isUp ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`}>
|
||||||
|
¥{product.price.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div className={`flex items-center justify-end gap-1 text-sm ${isUp ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`}>
|
||||||
|
{isUp ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
|
||||||
|
<span>{isUp ? '+' : ''}{product.change.toFixed(2)} ({isUp ? '+' : ''}{product.changePercent}%)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 多周期趋势 */}
|
||||||
|
<div className="mb-3">
|
||||||
|
<div className="flex items-center gap-1 text-xs text-[#a1a1aa] mb-2">
|
||||||
|
<Clock className="w-3 h-3" />
|
||||||
|
<span>多周期趋势</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{Object.entries(product.cycles).map(([key, trend]) => (
|
||||||
|
<TrendBadge key={key} direction={trend} label={cycleLabels[key]} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 成功率和趋势评分 */}
|
||||||
|
<div className="space-y-2 mb-3">
|
||||||
|
<div className="flex items-center justify-between text-xs">
|
||||||
|
<span className="text-[#a1a1aa] flex items-center gap-1">
|
||||||
|
<BarChart3 className="w-3 h-3" />
|
||||||
|
交易成功率
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<SuccessRateBar rate={product.successRate} />
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between text-xs">
|
||||||
|
<span className="text-[#a1a1aa]">趋势评分</span>
|
||||||
|
<span className={`font-medium ${product.trendScore >= 80 ? 'text-[#7dd75a]' : product.trendScore >= 60 ? 'text-[#f59e0b]' : 'text-[#ef4444]'}`}>
|
||||||
|
{product.trendScore}/100
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-1.5 bg-[#27272a] rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-full transition-all duration-500 ${
|
||||||
|
product.trendScore >= 80 ? 'bg-[#7dd75a]' : product.trendScore >= 60 ? 'bg-[#f59e0b]' : 'bg-[#ef4444]'
|
||||||
|
}`}
|
||||||
|
style={{ width: `${product.trendScore}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 关键点位 */}
|
||||||
|
<div className="pt-3 border-t border-[#27272a]">
|
||||||
|
<div className="flex items-center gap-1 text-xs text-[#a1a1aa] mb-2">
|
||||||
|
<Target className="w-3 h-3" />
|
||||||
|
<span>关键点位</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-xs">
|
||||||
|
<div>
|
||||||
|
<span className="text-[#71717a]">压力: </span>
|
||||||
|
<span className="text-[#ef4444] font-mono">{product.keyLevels.resistance[0]?.toLocaleString() || '-'}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-[#71717a]">支撑: </span>
|
||||||
|
<span className="text-[#7dd75a] font-mono">{product.keyLevels.support[0]?.toLocaleString() || '-'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 悬停指示 */}
|
||||||
|
<div className="flex items-center justify-end mt-3 pt-2 border-t border-[#27272a]/50">
|
||||||
|
<span className="text-xs text-[#71717a] group-hover:text-[#7dd75a] transition-colors flex items-center gap-1">
|
||||||
|
查看详情
|
||||||
|
<ChevronRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,380 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { ArrowLeft, TrendingUp, TrendingDown, Target, Clock, BarChart3, Activity, Zap } from 'lucide-react';
|
||||||
|
import { KLineChart } from './KLineChart';
|
||||||
|
import type { FuturesProduct, CycleAnalysis, TechnicalIndicators, TradingAdvice } from '@/types';
|
||||||
|
import { generateCycleAnalysis, generateTechnicalIndicators, generateTradingAdvice } from '@/data/mockData';
|
||||||
|
|
||||||
|
interface ProductDetailProps {
|
||||||
|
product: FuturesProduct;
|
||||||
|
onBack: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 周期切换按钮
|
||||||
|
function PeriodButton({
|
||||||
|
label,
|
||||||
|
isActive,
|
||||||
|
onClick
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
isActive: boolean;
|
||||||
|
onClick: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
|
||||||
|
isActive
|
||||||
|
? 'bg-[#7dd75a] text-[#09090b]'
|
||||||
|
: 'bg-[#27272a] text-[#a1a1aa] hover:bg-[#3f3f46] hover:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 指标卡片
|
||||||
|
function IndicatorCard({
|
||||||
|
title,
|
||||||
|
value,
|
||||||
|
status,
|
||||||
|
signal
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
value: string;
|
||||||
|
status: string;
|
||||||
|
signal?: 'positive' | 'negative' | 'neutral';
|
||||||
|
}) {
|
||||||
|
const signalColors = {
|
||||||
|
positive: 'text-[#7dd75a]',
|
||||||
|
negative: 'text-[#ef4444]',
|
||||||
|
neutral: 'text-[#a1a1aa]',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-3 rounded-lg border border-[#27272a] bg-[#09090b]">
|
||||||
|
<div className="text-xs text-[#71717a] mb-1">{title}</div>
|
||||||
|
<div className={`text-sm font-medium ${signal ? signalColors[signal] : 'text-white'}`}>{value}</div>
|
||||||
|
<div className="text-xs text-[#a1a1aa] mt-1">{status}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关键点位行
|
||||||
|
function KeyLevelRow({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
type
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
value: number;
|
||||||
|
type: 'resistance' | 'support';
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between py-2 border-b border-[#27272a]/50 last:border-0">
|
||||||
|
<span className="text-sm text-[#a1a1aa]">{label}</span>
|
||||||
|
<span className={`text-sm font-mono font-medium ${type === 'resistance' ? 'text-[#ef4444]' : 'text-[#7dd75a]'}`}>
|
||||||
|
{value.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProductDetail({ product, onBack }: ProductDetailProps) {
|
||||||
|
const [selectedPeriod, setSelectedPeriod] = useState<'m5' | 'm15' | 'm30' | 'm60'>('m15');
|
||||||
|
const [cycleData, setCycleData] = useState<CycleAnalysis | null>(null);
|
||||||
|
const [indicators, setIndicators] = useState<TechnicalIndicators | null>(null);
|
||||||
|
const [advice, setAdvice] = useState<TradingAdvice | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLoading(true);
|
||||||
|
// 模拟数据加载
|
||||||
|
setTimeout(() => {
|
||||||
|
setCycleData(generateCycleAnalysis(product.id, selectedPeriod));
|
||||||
|
setIndicators(generateTechnicalIndicators(product.id));
|
||||||
|
setAdvice(generateTradingAdvice(product.id));
|
||||||
|
setLoading(false);
|
||||||
|
}, 300);
|
||||||
|
}, [product.id, selectedPeriod]);
|
||||||
|
|
||||||
|
const isUp = product.change >= 0;
|
||||||
|
|
||||||
|
const periods = [
|
||||||
|
{ key: 'm5', label: '5分钟' },
|
||||||
|
{ key: 'm15', label: '15分钟' },
|
||||||
|
{ key: 'm30', label: '30分钟' },
|
||||||
|
{ key: 'm60', label: '60分钟' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const cycleLabels: Record<string, string> = {
|
||||||
|
m5: '5分钟',
|
||||||
|
m15: '15分钟',
|
||||||
|
m30: '30分钟',
|
||||||
|
m60: '60分钟',
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 返回按钮和标题 */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button
|
||||||
|
onClick={onBack}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 rounded-lg border border-[#27272a] bg-[#0d0d10] text-[#a1a1aa] hover:text-white hover:border-[#3f3f46] transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
<span>返回</span>
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold text-white">{product.name} ({product.code})</h2>
|
||||||
|
<p className="text-sm text-[#71717a]">详细技术分析</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 价格信息栏 */}
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
<div className="flex flex-wrap items-center gap-6">
|
||||||
|
<div>
|
||||||
|
<div className={`text-3xl font-bold font-mono ${isUp ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`}>
|
||||||
|
¥{product.price.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<div className={`flex items-center gap-1 text-sm ${isUp ? 'text-[#7dd75a]' : 'text-[#ef4444]'}`}>
|
||||||
|
{isUp ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
||||||
|
<span>{isUp ? '+' : ''}{product.change.toFixed(2)} ({isUp ? '+' : ''}{product.changePercent}%)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="h-12 w-px bg-[#27272a] hidden sm:block" />
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-[#71717a]">开盘</div>
|
||||||
|
<div className="text-sm font-mono text-white">{product.open.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-[#71717a]">最高</div>
|
||||||
|
<div className="text-sm font-mono text-[#7dd75a]">{product.high.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-[#71717a]">最低</div>
|
||||||
|
<div className="text-sm font-mono text-[#ef4444]">{product.low.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-xs text-[#71717a]">持仓量</div>
|
||||||
|
<div className="text-sm font-mono text-white">{product.openInterest.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||||
|
{/* K线图区域 */}
|
||||||
|
<div className="lg:col-span-2 space-y-4">
|
||||||
|
{/* 周期切换 */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock className="w-4 h-4 text-[#7dd75a]" />
|
||||||
|
<span className="text-sm text-[#a1a1aa]">周期选择</span>
|
||||||
|
<div className="flex gap-2 ml-2">
|
||||||
|
{periods.map((p) => (
|
||||||
|
<PeriodButton
|
||||||
|
key={p.key}
|
||||||
|
label={p.label}
|
||||||
|
isActive={selectedPeriod === p.key}
|
||||||
|
onClick={() => setSelectedPeriod(p.key as any)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 图表 */}
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
{loading ? (
|
||||||
|
<div className="h-[500px] flex items-center justify-center">
|
||||||
|
<div className="flex items-center gap-2 text-[#7dd75a]">
|
||||||
|
<div className="w-5 h-5 border-2 border-[#7dd75a] border-t-transparent rounded-full animate-spin" />
|
||||||
|
<span>加载图表数据...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : cycleData ? (
|
||||||
|
<KLineChart
|
||||||
|
klineData={cycleData.klineData}
|
||||||
|
macdData={cycleData.macdData}
|
||||||
|
resistance={cycleData.keyLevels.resistance}
|
||||||
|
support={cycleData.keyLevels.support}
|
||||||
|
height={500}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 分析面板 */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* 交易建议 */}
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className={`p-2 rounded-lg ${
|
||||||
|
advice?.action === 'long' ? 'bg-[#7dd75a]/10' :
|
||||||
|
advice?.action === 'short' ? 'bg-[#ef4444]/10' : 'bg-[#a1a1aa]/10'
|
||||||
|
}`}>
|
||||||
|
<Target className={`w-4 h-4 ${
|
||||||
|
advice?.action === 'long' ? 'text-[#7dd75a]' :
|
||||||
|
advice?.action === 'short' ? 'text-[#ef4444]' : 'text-[#a1a1aa]'
|
||||||
|
}`} />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-white">交易建议</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{advice && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className={`p-3 rounded-lg ${
|
||||||
|
advice.action === 'long' ? 'bg-[#7dd75a]/10 border border-[#7dd75a]/30' :
|
||||||
|
advice.action === 'short' ? 'bg-[#ef4444]/10 border border-[#ef4444]/30' :
|
||||||
|
'bg-[#a1a1aa]/10 border border-[#a1a1aa]/30'
|
||||||
|
}`}>
|
||||||
|
<div className="text-xs text-[#71717a] mb-1">操作建议</div>
|
||||||
|
<div className={`text-lg font-bold ${
|
||||||
|
advice.action === 'long' ? 'text-[#7dd75a]' :
|
||||||
|
advice.action === 'short' ? 'text-[#ef4444]' : 'text-[#a1a1aa]'
|
||||||
|
}`}>
|
||||||
|
{advice.action === 'long' ? '逢低做多' : advice.action === 'short' ? '逢高做空' : '观望等待'}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[#a1a1aa] mt-1">{advice.reason}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="p-2 rounded-lg bg-[#09090b]">
|
||||||
|
<div className="text-xs text-[#71717a]">建议入场</div>
|
||||||
|
<div className="text-sm font-mono text-white">{advice.entryPrice.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 rounded-lg bg-[#09090b]">
|
||||||
|
<div className="text-xs text-[#71717a]">目标价位</div>
|
||||||
|
<div className="text-sm font-mono text-[#7dd75a]">{advice.targetPrice.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 rounded-lg bg-[#09090b]">
|
||||||
|
<div className="text-xs text-[#71717a]">止损价位</div>
|
||||||
|
<div className="text-sm font-mono text-[#ef4444]">{advice.stopLoss.toLocaleString()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-2 rounded-lg bg-[#09090b]">
|
||||||
|
<div className="text-xs text-[#71717a]">风险等级</div>
|
||||||
|
<div className={`text-sm font-medium ${
|
||||||
|
advice.riskLevel === 'low' ? 'text-[#7dd75a]' :
|
||||||
|
advice.riskLevel === 'medium' ? 'text-[#f59e0b]' : 'text-[#ef4444]'
|
||||||
|
}`}>
|
||||||
|
{advice.riskLevel === 'low' ? '低' : advice.riskLevel === 'medium' ? '中' : '高'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 技术指标 */}
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="p-2 rounded-lg bg-[#60a5fa]/10">
|
||||||
|
<Activity className="w-4 h-4 text-[#60a5fa]" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-white">技术指标</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{indicators && (
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<IndicatorCard
|
||||||
|
title="MACD"
|
||||||
|
value={indicators.macd.signal === 'golden_cross' ? '金叉' : indicators.macd.signal === 'dead_cross' ? '死叉' : '中性'}
|
||||||
|
status={`DIF: ${indicators.macd.value}`}
|
||||||
|
signal={indicators.macd.signal === 'golden_cross' ? 'positive' : indicators.macd.signal === 'dead_cross' ? 'negative' : 'neutral'}
|
||||||
|
/>
|
||||||
|
<IndicatorCard
|
||||||
|
title="RSI"
|
||||||
|
value={`${indicators.rsi.value}`}
|
||||||
|
status={indicators.rsi.status === 'overbought' ? '超买' : indicators.rsi.status === 'oversold' ? '超卖' : '正常'}
|
||||||
|
signal={indicators.rsi.status === 'oversold' ? 'positive' : indicators.rsi.status === 'overbought' ? 'negative' : 'neutral'}
|
||||||
|
/>
|
||||||
|
<IndicatorCard
|
||||||
|
title="布林带"
|
||||||
|
value={indicators.bollinger.position === 'upper' ? '上轨' : indicators.bollinger.position === 'lower' ? '下轨' : '中轨'}
|
||||||
|
status={`区间: ${indicators.bollinger.lower.toFixed(0)}-${indicators.bollinger.upper.toFixed(0)}`}
|
||||||
|
signal={indicators.bollinger.position === 'lower' ? 'positive' : indicators.bollinger.position === 'upper' ? 'negative' : 'neutral'}
|
||||||
|
/>
|
||||||
|
<IndicatorCard
|
||||||
|
title="KDJ"
|
||||||
|
value={indicators.kdj.signal === 'golden_cross' ? '金叉' : indicators.kdj.signal === 'dead_cross' ? '死叉' : '中性'}
|
||||||
|
status={`K: ${indicators.kdj.k} D: ${indicators.kdj.d}`}
|
||||||
|
signal={indicators.kdj.signal === 'golden_cross' ? 'positive' : indicators.kdj.signal === 'dead_cross' ? 'negative' : 'neutral'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 关键点位 */}
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="p-2 rounded-lg bg-[#f59e0b]/10">
|
||||||
|
<BarChart3 className="w-4 h-4 text-[#f59e0b]" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-white">关键点位</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-xs text-[#ef4444] font-medium mb-2">压力位</div>
|
||||||
|
{product.keyLevels.resistance.map((level, index) => (
|
||||||
|
<KeyLevelRow key={index} label={`压力 ${index + 1}`} value={level} type="resistance" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 space-y-1">
|
||||||
|
<div className="text-xs text-[#7dd75a] font-medium mb-2">支撑位</div>
|
||||||
|
{product.keyLevels.support.map((level, index) => (
|
||||||
|
<KeyLevelRow key={index} label={`支撑 ${index + 1}`} value={level} type="support" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 多周期一致性 */}
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="p-2 rounded-lg bg-[#c084fc]/10">
|
||||||
|
<Zap className="w-4 h-4 text-[#c084fc]" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-white">多周期一致性</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{Object.entries(product.cycles).map(([key, trend]) => (
|
||||||
|
<div key={key} className="flex items-center justify-between py-1.5">
|
||||||
|
<span className="text-sm text-[#a1a1aa]">{cycleLabels[key]}</span>
|
||||||
|
<div className={`flex items-center gap-1 px-2 py-1 rounded text-xs ${
|
||||||
|
trend === 'up' ? 'bg-[#7dd75a]/10 text-[#7dd75a]' :
|
||||||
|
trend === 'down' ? 'bg-[#ef4444]/10 text-[#ef4444]' :
|
||||||
|
'bg-[#a1a1aa]/10 text-[#a1a1aa]'
|
||||||
|
}`}>
|
||||||
|
{trend === 'up' ? <TrendingUp className="w-3 h-3" /> : trend === 'down' ? <TrendingDown className="w-3 h-3" /> : <div className="w-3 h-0.5 bg-current" />}
|
||||||
|
<span>{trend === 'up' ? '上涨' : trend === 'down' ? '下跌' : '震荡'}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 pt-3 border-t border-[#27272a]">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm text-[#a1a1aa]">周期共振度</span>
|
||||||
|
<span className={`text-sm font-bold ${product.trendScore >= 80 ? 'text-[#7dd75a]' : product.trendScore >= 60 ? 'text-[#f59e0b]' : 'text-[#ef4444]'}`}>
|
||||||
|
{product.trendScore}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 h-2 bg-[#27272a] rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className={`h-full rounded-full transition-all duration-500 ${
|
||||||
|
product.trendScore >= 80 ? 'bg-[#7dd75a]' : product.trendScore >= 60 ? 'bg-[#f59e0b]' : 'bg-[#ef4444]'
|
||||||
|
}`}
|
||||||
|
style={{ width: `${product.trendScore}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,100 @@
|
|||||||
|
import { AlertTriangle, Bell, Shield, TrendingDown, AlertOctagon } from 'lucide-react';
|
||||||
|
import type { RiskAlert } from '@/types';
|
||||||
|
|
||||||
|
interface RiskAlertsProps {
|
||||||
|
alerts: RiskAlert[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 风险等级徽章
|
||||||
|
function RiskLevelBadge({ level }: { level: 'high' | 'medium' | 'low' }) {
|
||||||
|
const config = {
|
||||||
|
high: { text: '高风险', color: 'text-[#ef4444]', bg: 'bg-[#ef4444]/10', icon: AlertOctagon },
|
||||||
|
medium: { text: '中风险', color: 'text-[#f59e0b]', bg: 'bg-[#f59e0b]/10', icon: AlertTriangle },
|
||||||
|
low: { text: '低风险', color: 'text-[#7dd75a]', bg: 'bg-[#7dd75a]/10', icon: Shield },
|
||||||
|
};
|
||||||
|
|
||||||
|
const { text, color, bg, icon: Icon } = config[level];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`flex items-center gap-1 px-2 py-1 rounded-md ${bg}`}>
|
||||||
|
<Icon className={`w-3 h-3 ${color}`} />
|
||||||
|
<span className={`text-xs font-medium ${color}`}>{text}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RiskAlertsPanel({ alerts }: RiskAlertsProps) {
|
||||||
|
if (alerts.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="p-2 rounded-lg bg-[#7dd75a]/10">
|
||||||
|
<Shield className="w-4 h-4 text-[#7dd75a]" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-white">风险提醒</h3>
|
||||||
|
</div>
|
||||||
|
<div className="text-center py-6 text-[#71717a]">
|
||||||
|
<Shield className="w-10 h-10 mx-auto mb-2 opacity-50" />
|
||||||
|
<p className="text-sm">当前无重大风险事件</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 rounded-xl border border-[#27272a] bg-[#0d0d10]">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="p-2 rounded-lg bg-[#ef4444]/10">
|
||||||
|
<Bell className="w-4 h-4 text-[#ef4444]" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-white">风险提醒</h3>
|
||||||
|
</div>
|
||||||
|
<span className="px-2 py-1 rounded-full bg-[#ef4444]/10 text-[#ef4444] text-xs font-medium">
|
||||||
|
{alerts.length} 条
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{alerts.map((alert) => (
|
||||||
|
<div
|
||||||
|
key={alert.id}
|
||||||
|
className="p-3 rounded-lg border border-[#27272a] bg-[#09090b] hover:border-[#ef4444]/30 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-3 mb-2">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className="text-sm font-medium text-white mb-1">{alert.title}</h4>
|
||||||
|
<p className="text-xs text-[#a1a1aa] line-clamp-2">{alert.description}</p>
|
||||||
|
</div>
|
||||||
|
<RiskLevelBadge level={alert.riskLevel} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between text-xs">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-[#71717a]">影响品种:</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{alert.affectedProducts.slice(0, 2).map((product) => (
|
||||||
|
<span key={product} className="px-1.5 py-0.5 rounded bg-[#27272a] text-[#e6e6e6]">
|
||||||
|
{product}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{alert.affectedProducts.length > 2 && (
|
||||||
|
<span className="text-[#71717a]">+{alert.affectedProducts.length - 2}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className="text-[#71717a]">{alert.time}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2 pt-2 border-t border-[#27272a]/50">
|
||||||
|
<div className="flex items-center gap-1 text-xs">
|
||||||
|
<TrendingDown className="w-3 h-3 text-[#f59e0b]" />
|
||||||
|
<span className="text-[#f59e0b]">建议: {alert.suggestion}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||||
|
import { ChevronDownIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Accordion({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||||
|
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Item
|
||||||
|
data-slot="accordion-item"
|
||||||
|
className={cn("border-b last:border-b-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Header className="flex">
|
||||||
|
<AccordionPrimitive.Trigger
|
||||||
|
data-slot="accordion-trigger"
|
||||||
|
className={cn(
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
|
||||||
|
</AccordionPrimitive.Trigger>
|
||||||
|
</AccordionPrimitive.Header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AccordionContent({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<AccordionPrimitive.Content
|
||||||
|
data-slot="accordion-content"
|
||||||
|
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className={cn("pt-0 pb-4", className)}>{children}</div>
|
||||||
|
</AccordionPrimitive.Content>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { buttonVariants } from "@/components/ui/button"
|
||||||
|
|
||||||
|
function AlertDialog({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||||
|
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTrigger({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogPortal({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogOverlay({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Overlay
|
||||||
|
data-slot="alert-dialog-overlay"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPortal>
|
||||||
|
<AlertDialogOverlay />
|
||||||
|
<AlertDialogPrimitive.Content
|
||||||
|
data-slot="alert-dialog-content"
|
||||||
|
className={cn(
|
||||||
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</AlertDialogPortal>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogHeader({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-header"
|
||||||
|
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogFooter({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-dialog-footer"
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogTitle({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Title
|
||||||
|
data-slot="alert-dialog-title"
|
||||||
|
className={cn("text-lg font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Description
|
||||||
|
data-slot="alert-dialog-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogAction({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Action
|
||||||
|
className={cn(buttonVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDialogCancel({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||||
|
return (
|
||||||
|
<AlertDialogPrimitive.Cancel
|
||||||
|
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogPortal,
|
||||||
|
AlertDialogOverlay,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const alertVariants = cva(
|
||||||
|
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-card text-card-foreground",
|
||||||
|
destructive:
|
||||||
|
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Alert({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert"
|
||||||
|
role="alert"
|
||||||
|
className={cn(alertVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-title"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AlertDescription({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="alert-description"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Alert, AlertTitle, AlertDescription }
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
|
||||||
|
|
||||||
|
function AspectRatio({
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
|
||||||
|
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
export { AspectRatio }
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Avatar({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
data-slot="avatar"
|
||||||
|
className={cn(
|
||||||
|
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarImage({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
data-slot="avatar-image"
|
||||||
|
className={cn("aspect-square size-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function AvatarFallback({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||||
|
return (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
data-slot="avatar-fallback"
|
||||||
|
className={cn(
|
||||||
|
"bg-muted flex size-full items-center justify-center rounded-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback }
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||||
|
secondary:
|
||||||
|
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||||
|
destructive:
|
||||||
|
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span"> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : "span"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
||||||
|
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
||||||
|
return (
|
||||||
|
<ol
|
||||||
|
data-slot="breadcrumb-list"
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="breadcrumb-item"
|
||||||
|
className={cn("inline-flex items-center gap-1.5", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbLink({
|
||||||
|
asChild,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"a"> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "a"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="breadcrumb-link"
|
||||||
|
className={cn("hover:text-foreground transition-colors", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="breadcrumb-page"
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
className={cn("text-foreground font-normal", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbSeparator({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"li">) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
data-slot="breadcrumb-separator"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("[&>svg]:size-3.5", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children ?? <ChevronRight />}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function BreadcrumbEllipsis({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"span">) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
data-slot="breadcrumb-ellipsis"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn("flex size-9 items-center justify-center", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="size-4" />
|
||||||
|
<span className="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Separator } from "@/components/ui/separator"
|
||||||
|
|
||||||
|
const buttonGroupVariants = cva(
|
||||||
|
"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
orientation: {
|
||||||
|
horizontal:
|
||||||
|
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
||||||
|
vertical:
|
||||||
|
"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
orientation: "horizontal",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function ButtonGroup({
|
||||||
|
className,
|
||||||
|
orientation,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="group"
|
||||||
|
data-slot="button-group"
|
||||||
|
data-orientation={orientation}
|
||||||
|
className={cn(buttonGroupVariants({ orientation }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ButtonGroupText({
|
||||||
|
className,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "div"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(
|
||||||
|
"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ButtonGroupSeparator({
|
||||||
|
className,
|
||||||
|
orientation = "vertical",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Separator>) {
|
||||||
|
return (
|
||||||
|
<Separator
|
||||||
|
data-slot="button-group-separator"
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
ButtonGroup,
|
||||||
|
ButtonGroupSeparator,
|
||||||
|
ButtonGroupText,
|
||||||
|
buttonGroupVariants,
|
||||||
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
"icon-sm": "size-8",
|
||||||
|
"icon-lg": "size-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
@ -0,0 +1,220 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import {
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronLeftIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
} from "lucide-react"
|
||||||
|
import {
|
||||||
|
DayPicker,
|
||||||
|
getDefaultClassNames,
|
||||||
|
type DayButton,
|
||||||
|
} from "react-day-picker"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button, buttonVariants } from "@/components/ui/button"
|
||||||
|
|
||||||
|
function Calendar({
|
||||||
|
className,
|
||||||
|
classNames,
|
||||||
|
showOutsideDays = true,
|
||||||
|
captionLayout = "label",
|
||||||
|
buttonVariant = "ghost",
|
||||||
|
formatters,
|
||||||
|
components,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayPicker> & {
|
||||||
|
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
|
||||||
|
}) {
|
||||||
|
const defaultClassNames = getDefaultClassNames()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DayPicker
|
||||||
|
showOutsideDays={showOutsideDays}
|
||||||
|
className={cn(
|
||||||
|
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||||
|
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||||
|
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
captionLayout={captionLayout}
|
||||||
|
formatters={{
|
||||||
|
formatMonthDropdown: (date) =>
|
||||||
|
date.toLocaleString("default", { month: "short" }),
|
||||||
|
...formatters,
|
||||||
|
}}
|
||||||
|
classNames={{
|
||||||
|
root: cn("w-fit", defaultClassNames.root),
|
||||||
|
months: cn(
|
||||||
|
"flex gap-4 flex-col md:flex-row relative",
|
||||||
|
defaultClassNames.months
|
||||||
|
),
|
||||||
|
month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
|
||||||
|
nav: cn(
|
||||||
|
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
|
||||||
|
defaultClassNames.nav
|
||||||
|
),
|
||||||
|
button_previous: cn(
|
||||||
|
buttonVariants({ variant: buttonVariant }),
|
||||||
|
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||||
|
defaultClassNames.button_previous
|
||||||
|
),
|
||||||
|
button_next: cn(
|
||||||
|
buttonVariants({ variant: buttonVariant }),
|
||||||
|
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
|
||||||
|
defaultClassNames.button_next
|
||||||
|
),
|
||||||
|
month_caption: cn(
|
||||||
|
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
|
||||||
|
defaultClassNames.month_caption
|
||||||
|
),
|
||||||
|
dropdowns: cn(
|
||||||
|
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
|
||||||
|
defaultClassNames.dropdowns
|
||||||
|
),
|
||||||
|
dropdown_root: cn(
|
||||||
|
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
|
||||||
|
defaultClassNames.dropdown_root
|
||||||
|
),
|
||||||
|
dropdown: cn(
|
||||||
|
"absolute bg-popover inset-0 opacity-0",
|
||||||
|
defaultClassNames.dropdown
|
||||||
|
),
|
||||||
|
caption_label: cn(
|
||||||
|
"select-none font-medium",
|
||||||
|
captionLayout === "label"
|
||||||
|
? "text-sm"
|
||||||
|
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
|
||||||
|
defaultClassNames.caption_label
|
||||||
|
),
|
||||||
|
table: "w-full border-collapse",
|
||||||
|
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||||
|
weekday: cn(
|
||||||
|
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
|
||||||
|
defaultClassNames.weekday
|
||||||
|
),
|
||||||
|
week: cn("flex w-full mt-2", defaultClassNames.week),
|
||||||
|
week_number_header: cn(
|
||||||
|
"select-none w-(--cell-size)",
|
||||||
|
defaultClassNames.week_number_header
|
||||||
|
),
|
||||||
|
week_number: cn(
|
||||||
|
"text-[0.8rem] select-none text-muted-foreground",
|
||||||
|
defaultClassNames.week_number
|
||||||
|
),
|
||||||
|
day: cn(
|
||||||
|
"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
|
||||||
|
props.showWeekNumber
|
||||||
|
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
|
||||||
|
: "[&:first-child[data-selected=true]_button]:rounded-l-md",
|
||||||
|
defaultClassNames.day
|
||||||
|
),
|
||||||
|
range_start: cn(
|
||||||
|
"rounded-l-md bg-accent",
|
||||||
|
defaultClassNames.range_start
|
||||||
|
),
|
||||||
|
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||||
|
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
|
||||||
|
today: cn(
|
||||||
|
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||||
|
defaultClassNames.today
|
||||||
|
),
|
||||||
|
outside: cn(
|
||||||
|
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||||
|
defaultClassNames.outside
|
||||||
|
),
|
||||||
|
disabled: cn(
|
||||||
|
"text-muted-foreground opacity-50",
|
||||||
|
defaultClassNames.disabled
|
||||||
|
),
|
||||||
|
hidden: cn("invisible", defaultClassNames.hidden),
|
||||||
|
...classNames,
|
||||||
|
}}
|
||||||
|
components={{
|
||||||
|
Root: ({ className, rootRef, ...props }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="calendar"
|
||||||
|
ref={rootRef}
|
||||||
|
className={cn(className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
Chevron: ({ className, orientation, ...props }) => {
|
||||||
|
if (orientation === "left") {
|
||||||
|
return (
|
||||||
|
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orientation === "right") {
|
||||||
|
return (
|
||||||
|
<ChevronRightIcon
|
||||||
|
className={cn("size-4", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||||
|
)
|
||||||
|
},
|
||||||
|
DayButton: CalendarDayButton,
|
||||||
|
WeekNumber: ({ children, ...props }) => {
|
||||||
|
return (
|
||||||
|
<td {...props}>
|
||||||
|
<div className="flex size-(--cell-size) items-center justify-center text-center">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
...components,
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CalendarDayButton({
|
||||||
|
className,
|
||||||
|
day,
|
||||||
|
modifiers,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof DayButton>) {
|
||||||
|
const defaultClassNames = getDefaultClassNames()
|
||||||
|
|
||||||
|
const ref = React.useRef<HTMLButtonElement>(null)
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (modifiers.focused) ref.current?.focus()
|
||||||
|
}, [modifiers.focused])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
ref={ref}
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
data-day={day.date.toLocaleDateString()}
|
||||||
|
data-selected-single={
|
||||||
|
modifiers.selected &&
|
||||||
|
!modifiers.range_start &&
|
||||||
|
!modifiers.range_end &&
|
||||||
|
!modifiers.range_middle
|
||||||
|
}
|
||||||
|
data-range-start={modifiers.range_start}
|
||||||
|
data-range-end={modifiers.range_end}
|
||||||
|
data-range-middle={modifiers.range_middle}
|
||||||
|
className={cn(
|
||||||
|
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
|
||||||
|
defaultClassNames.day,
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Calendar, CalendarDayButton }
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
@ -0,0 +1,239 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import useEmblaCarousel, {
|
||||||
|
type UseEmblaCarouselType,
|
||||||
|
} from "embla-carousel-react"
|
||||||
|
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
|
||||||
|
type CarouselApi = UseEmblaCarouselType[1]
|
||||||
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||||
|
type CarouselOptions = UseCarouselParameters[0]
|
||||||
|
type CarouselPlugin = UseCarouselParameters[1]
|
||||||
|
|
||||||
|
type CarouselProps = {
|
||||||
|
opts?: CarouselOptions
|
||||||
|
plugins?: CarouselPlugin
|
||||||
|
orientation?: "horizontal" | "vertical"
|
||||||
|
setApi?: (api: CarouselApi) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type CarouselContextProps = {
|
||||||
|
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||||
|
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||||
|
scrollPrev: () => void
|
||||||
|
scrollNext: () => void
|
||||||
|
canScrollPrev: boolean
|
||||||
|
canScrollNext: boolean
|
||||||
|
} & CarouselProps
|
||||||
|
|
||||||
|
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||||
|
|
||||||
|
function useCarousel() {
|
||||||
|
const context = React.useContext(CarouselContext)
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useCarousel must be used within a <Carousel />")
|
||||||
|
}
|
||||||
|
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
||||||
|
function Carousel({
|
||||||
|
orientation = "horizontal",
|
||||||
|
opts,
|
||||||
|
setApi,
|
||||||
|
plugins,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||||
|
const [carouselRef, api] = useEmblaCarousel(
|
||||||
|
{
|
||||||
|
...opts,
|
||||||
|
axis: orientation === "horizontal" ? "x" : "y",
|
||||||
|
},
|
||||||
|
plugins
|
||||||
|
)
|
||||||
|
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||||
|
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||||
|
|
||||||
|
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||||
|
if (!api) return
|
||||||
|
setCanScrollPrev(api.canScrollPrev())
|
||||||
|
setCanScrollNext(api.canScrollNext())
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const scrollPrev = React.useCallback(() => {
|
||||||
|
api?.scrollPrev()
|
||||||
|
}, [api])
|
||||||
|
|
||||||
|
const scrollNext = React.useCallback(() => {
|
||||||
|
api?.scrollNext()
|
||||||
|
}, [api])
|
||||||
|
|
||||||
|
const handleKeyDown = React.useCallback(
|
||||||
|
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||||
|
if (event.key === "ArrowLeft") {
|
||||||
|
event.preventDefault()
|
||||||
|
scrollPrev()
|
||||||
|
} else if (event.key === "ArrowRight") {
|
||||||
|
event.preventDefault()
|
||||||
|
scrollNext()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[scrollPrev, scrollNext]
|
||||||
|
)
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api || !setApi) return
|
||||||
|
setApi(api)
|
||||||
|
}, [api, setApi])
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (!api) return
|
||||||
|
onSelect(api)
|
||||||
|
api.on("reInit", onSelect)
|
||||||
|
api.on("select", onSelect)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
api?.off("select", onSelect)
|
||||||
|
}
|
||||||
|
}, [api, onSelect])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CarouselContext.Provider
|
||||||
|
value={{
|
||||||
|
carouselRef,
|
||||||
|
api: api,
|
||||||
|
opts,
|
||||||
|
orientation:
|
||||||
|
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||||
|
scrollPrev,
|
||||||
|
scrollNext,
|
||||||
|
canScrollPrev,
|
||||||
|
canScrollNext,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onKeyDownCapture={handleKeyDown}
|
||||||
|
className={cn("relative", className)}
|
||||||
|
role="region"
|
||||||
|
aria-roledescription="carousel"
|
||||||
|
data-slot="carousel"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</CarouselContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { carouselRef, orientation } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={carouselRef}
|
||||||
|
className="overflow-hidden"
|
||||||
|
data-slot="carousel-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex",
|
||||||
|
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
const { orientation } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
|
data-slot="carousel-item"
|
||||||
|
className={cn(
|
||||||
|
"min-w-0 shrink-0 grow-0 basis-full",
|
||||||
|
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselPrevious({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-previous"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -left-12 -translate-y-1/2"
|
||||||
|
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
disabled={!canScrollPrev}
|
||||||
|
onClick={scrollPrev}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowLeft />
|
||||||
|
<span className="sr-only">Previous slide</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CarouselNext({
|
||||||
|
className,
|
||||||
|
variant = "outline",
|
||||||
|
size = "icon",
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof Button>) {
|
||||||
|
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
data-slot="carousel-next"
|
||||||
|
variant={variant}
|
||||||
|
size={size}
|
||||||
|
className={cn(
|
||||||
|
"absolute size-8 rounded-full",
|
||||||
|
orientation === "horizontal"
|
||||||
|
? "top-1/2 -right-12 -translate-y-1/2"
|
||||||
|
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
disabled={!canScrollNext}
|
||||||
|
onClick={scrollNext}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ArrowRight />
|
||||||
|
<span className="sr-only">Next slide</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
type CarouselApi,
|
||||||
|
Carousel,
|
||||||
|
CarouselContent,
|
||||||
|
CarouselItem,
|
||||||
|
CarouselPrevious,
|
||||||
|
CarouselNext,
|
||||||
|
}
|
||||||
@ -0,0 +1,357 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as RechartsPrimitive from "recharts"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||||
|
const THEMES = { light: "", dark: ".dark" } as const
|
||||||
|
|
||||||
|
export type ChartConfig = {
|
||||||
|
[k in string]: {
|
||||||
|
label?: React.ReactNode
|
||||||
|
icon?: React.ComponentType
|
||||||
|
} & (
|
||||||
|
| { color?: string; theme?: never }
|
||||||
|
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
type ChartContextProps = {
|
||||||
|
config: ChartConfig
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartContext = React.createContext<ChartContextProps | null>(null)
|
||||||
|
|
||||||
|
function useChart() {
|
||||||
|
const context = React.useContext(ChartContext)
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error("useChart must be used within a <ChartContainer />")
|
||||||
|
}
|
||||||
|
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartContainer({
|
||||||
|
id,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
config,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"div"> & {
|
||||||
|
config: ChartConfig
|
||||||
|
children: React.ComponentProps<
|
||||||
|
typeof RechartsPrimitive.ResponsiveContainer
|
||||||
|
>["children"]
|
||||||
|
}) {
|
||||||
|
const uniqueId = React.useId()
|
||||||
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ChartContext.Provider value={{ config }}>
|
||||||
|
<div
|
||||||
|
data-slot="chart"
|
||||||
|
data-chart={chartId}
|
||||||
|
className={cn(
|
||||||
|
"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChartStyle id={chartId} config={config} />
|
||||||
|
<RechartsPrimitive.ResponsiveContainer>
|
||||||
|
{children}
|
||||||
|
</RechartsPrimitive.ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</ChartContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||||
|
const colorConfig = Object.entries(config).filter(
|
||||||
|
([, config]) => config.theme || config.color
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!colorConfig.length) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<style
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: Object.entries(THEMES)
|
||||||
|
.map(
|
||||||
|
([theme, prefix]) => `
|
||||||
|
${prefix} [data-chart=${id}] {
|
||||||
|
${colorConfig
|
||||||
|
.map(([key, itemConfig]) => {
|
||||||
|
const color =
|
||||||
|
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
|
||||||
|
itemConfig.color
|
||||||
|
return color ? ` --color-${key}: ${color};` : null
|
||||||
|
})
|
||||||
|
.join("\n")}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
)
|
||||||
|
.join("\n"),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartTooltip = RechartsPrimitive.Tooltip
|
||||||
|
|
||||||
|
function ChartTooltipContent({
|
||||||
|
active,
|
||||||
|
payload,
|
||||||
|
className,
|
||||||
|
indicator = "dot",
|
||||||
|
hideLabel = false,
|
||||||
|
hideIndicator = false,
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
labelClassName,
|
||||||
|
formatter,
|
||||||
|
color,
|
||||||
|
nameKey,
|
||||||
|
labelKey,
|
||||||
|
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||||
|
React.ComponentProps<"div"> & {
|
||||||
|
hideLabel?: boolean
|
||||||
|
hideIndicator?: boolean
|
||||||
|
indicator?: "line" | "dot" | "dashed"
|
||||||
|
nameKey?: string
|
||||||
|
labelKey?: string
|
||||||
|
}) {
|
||||||
|
const { config } = useChart()
|
||||||
|
|
||||||
|
const tooltipLabel = React.useMemo(() => {
|
||||||
|
if (hideLabel || !payload?.length) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const [item] = payload
|
||||||
|
const key = `${labelKey || item?.dataKey || item?.name || "value"}`
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||||
|
const value =
|
||||||
|
!labelKey && typeof label === "string"
|
||||||
|
? config[label as keyof typeof config]?.label || label
|
||||||
|
: itemConfig?.label
|
||||||
|
|
||||||
|
if (labelFormatter) {
|
||||||
|
return (
|
||||||
|
<div className={cn("font-medium", labelClassName)}>
|
||||||
|
{labelFormatter(value, payload)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className={cn("font-medium", labelClassName)}>{value}</div>
|
||||||
|
}, [
|
||||||
|
label,
|
||||||
|
labelFormatter,
|
||||||
|
payload,
|
||||||
|
hideLabel,
|
||||||
|
labelClassName,
|
||||||
|
config,
|
||||||
|
labelKey,
|
||||||
|
])
|
||||||
|
|
||||||
|
if (!active || !payload?.length) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const nestLabel = payload.length === 1 && indicator !== "dot"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{!nestLabel ? tooltipLabel : null}
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{payload
|
||||||
|
.filter((item) => item.type !== "none")
|
||||||
|
.map((item, index) => {
|
||||||
|
const key = `${nameKey || item.name || item.dataKey || "value"}`
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||||
|
const indicatorColor = color || item.payload.fill || item.color
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.dataKey}
|
||||||
|
className={cn(
|
||||||
|
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
|
||||||
|
indicator === "dot" && "items-center"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{formatter && item?.value !== undefined && item.name ? (
|
||||||
|
formatter(item.value, item.name, item, index, item.payload)
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{itemConfig?.icon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
!hideIndicator && (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||||
|
{
|
||||||
|
"h-2.5 w-2.5": indicator === "dot",
|
||||||
|
"w-1": indicator === "line",
|
||||||
|
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||||
|
indicator === "dashed",
|
||||||
|
"my-0.5": nestLabel && indicator === "dashed",
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--color-bg": indicatorColor,
|
||||||
|
"--color-border": indicatorColor,
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-1 justify-between leading-none",
|
||||||
|
nestLabel ? "items-end" : "items-center"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
{nestLabel ? tooltipLabel : null}
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{itemConfig?.label || item.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{item.value && (
|
||||||
|
<span className="text-foreground font-mono font-medium tabular-nums">
|
||||||
|
{item.value.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartLegend = RechartsPrimitive.Legend
|
||||||
|
|
||||||
|
function ChartLegendContent({
|
||||||
|
className,
|
||||||
|
hideIcon = false,
|
||||||
|
payload,
|
||||||
|
verticalAlign = "bottom",
|
||||||
|
nameKey,
|
||||||
|
}: React.ComponentProps<"div"> &
|
||||||
|
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
|
||||||
|
hideIcon?: boolean
|
||||||
|
nameKey?: string
|
||||||
|
}) {
|
||||||
|
const { config } = useChart()
|
||||||
|
|
||||||
|
if (!payload?.length) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex items-center justify-center gap-4",
|
||||||
|
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{payload
|
||||||
|
.filter((item) => item.type !== "none")
|
||||||
|
.map((item) => {
|
||||||
|
const key = `${nameKey || item.dataKey || "value"}`
|
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.value}
|
||||||
|
className={cn(
|
||||||
|
"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{itemConfig?.icon && !hideIcon ? (
|
||||||
|
<itemConfig.icon />
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: item.color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{itemConfig?.label}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper to extract item config from a payload.
|
||||||
|
function getPayloadConfigFromPayload(
|
||||||
|
config: ChartConfig,
|
||||||
|
payload: unknown,
|
||||||
|
key: string
|
||||||
|
) {
|
||||||
|
if (typeof payload !== "object" || payload === null) {
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const payloadPayload =
|
||||||
|
"payload" in payload &&
|
||||||
|
typeof payload.payload === "object" &&
|
||||||
|
payload.payload !== null
|
||||||
|
? payload.payload
|
||||||
|
: undefined
|
||||||
|
|
||||||
|
let configLabelKey: string = key
|
||||||
|
|
||||||
|
if (
|
||||||
|
key in payload &&
|
||||||
|
typeof payload[key as keyof typeof payload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payload[key as keyof typeof payload] as string
|
||||||
|
} else if (
|
||||||
|
payloadPayload &&
|
||||||
|
key in payloadPayload &&
|
||||||
|
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||||
|
) {
|
||||||
|
configLabelKey = payloadPayload[
|
||||||
|
key as keyof typeof payloadPayload
|
||||||
|
] as string
|
||||||
|
}
|
||||||
|
|
||||||
|
return configLabelKey in config
|
||||||
|
? config[configLabelKey]
|
||||||
|
: config[key as keyof typeof config]
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
ChartContainer,
|
||||||
|
ChartTooltip,
|
||||||
|
ChartTooltipContent,
|
||||||
|
ChartLegend,
|
||||||
|
ChartLegendContent,
|
||||||
|
ChartStyle,
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||||
|
import { CheckIcon } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Checkbox({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
data-slot="checkbox"
|
||||||
|
className={cn(
|
||||||
|
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
data-slot="checkbox-indicator"
|
||||||
|
className="grid place-content-center text-current transition-none"
|
||||||
|
>
|
||||||
|
<CheckIcon className="size-3.5" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Checkbox }
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue