# openvlab

**Repository Path**: JustTwo/openvlab

## Basic Information

- **Project Name**: openvlab
- **Description**: 简易项目
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-22
- **Last Updated**: 2025-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OpenVlab 波动率分析平台

基于 Nuxt@3.13.0 构建的金融波动率分析平台，一比一还原 OpenVlab 波动率页面，提供实时市场波动率数据和期权分析工具。

## ✨ 功能特性

- **📊 波动率图表**: 基于 ECharts 的实时波动率曲线和持仓量分析
- **🎨 主题切换**: 支持黑白主题无缝切换
- **📱 响应式设计**: 支持桌面端、平板端和移动端，一行最多显示4个图表
- **🔍 智能筛选**: 板块筛选（股指、金属、能化、农副、油脂、黑色）和交易所筛选
- **📈 实时数据**: 模拟实时市场数据更新和价格变化
- **⚡ 高性能**: 基于 Nuxt@3.13.0 的服务端渲染和自动代码分割

## 🛠️ 技术栈

- **前端框架**: Nuxt@3.13.0 (Vue3 + TypeScript + Vite)
- **图表库**: ECharts 5.6.0
- **样式框架**: TailwindCSS + SCSS
- **状态管理**: Pinia
- **Node版本**: 22.12.0

## 🚀 快速开始

### 环境要求

- Node.js 22.12.0+
- npm/pnpm/yarn

### 安装依赖

```bash
# 进入项目目录
cd openvlab-volatility

# 安装依赖
npm install
# 或
pnpm install
# 或
yarn install
```

### 开发服务器

启动开发服务器：

```bash
# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev
```

访问 `http://localhost:3000` 或 `http://localhost:3001`（如果3000端口被占用）

### 生产构建

构建生产版本：

```bash
# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build
```

预览生产构建：

```bash
# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview
```

## 📁 项目结构

```
openvlab-volatility/
├── components/               # 组件
│   ├── AppHeader.vue         # 头部导航组件
│   ├── charts/               # 图表组件
│   │   └── VolatilityChart.vue
│   ├── FilterBar.vue         # 筛选栏组件
│   └── ui/                   # UI组件
│       └── Icon.vue
├── composables/              # 组合式函数
│   ├── useMarketData.ts      # 市场数据管理
│   └── useTheme.ts           # 主题管理
├── layouts/                  # 布局
│   └── default.vue
├── pages/                    # 页面
│   └── index.vue             # 波动率概览页
├── plugins/                   # 插件
│   └── echarts.client.ts     # ECharts插件
├── types/                    # TypeScript类型定义
│   └── market.ts
└── assets/                   # 静态资源
    └── scss/                 # 样式文件
```

## 🎯 核心功能

### 波动率图表
- 今日波动率和昨日波动率对比曲线
- 持仓量柱状图分析
- 响应式图表大小调整
- 主题适配（黑白主题）

### 数据展示
- 产品信息（名称、代码、到期天数）
- 实时价格和涨跌幅
- 隐含波动率和变化趋势
- 合约选择功能

### 筛选功能
- 板块筛选：股指、金属、能化、农副、油脂、黑色
- 交易所筛选：中金所、上交所、深交所、上期所、大商所、郑商所、能源中心、广期所
- 实时筛选结果更新

### 主题系统
- 黑白主题无缝切换
- 主题状态持久化存储
- 图表主题自动适配

## 📱 响应式设计

- **桌面端**: 4列网格布局，完整功能展示
- **平板端**: 3列网格布局，适配中等屏幕
- **移动端**: 2列或1列网格布局，优化触摸交互

## 🔧 开发指南

### 添加新的图表类型
1. 在 `components/charts/` 目录下创建新的图表组件
2. 继承基础图表配置
3. 在 `pages/index.vue` 中引入使用

### 自定义主题
1. 修改 `assets/scss/_variables.scss` 中的主题变量
2. 更新 `composables/useTheme.ts` 中的主题逻辑
3. 确保图表组件支持主题切换

### 添加新的数据源
1. 在 `composables/useMarketData.ts` 中扩展数据接口
2. 更新 `types/market.ts` 中的类型定义
3. 实现数据获取和状态管理逻辑