# vlab_web

**Repository Path**: shareholder-ceo/vlab_web

## Basic Information

- **Project Name**: vlab_web
- **Description**: OpenVlab 页面模仿开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-19
- **Last Updated**: 2025-10-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React VLab Web

一个基于 React + Vite 的前端演示项目，用于展示隐波/波动率相关的市场数据卡片与表格，并支持按品种/交易所筛选和导出当前表格为 PDF。

## 项目结构

- `src/`
  - `components/`
    - `Header.jsx` — 顶部导航
    - `HotSpotCard.jsx` — 热点卡片组件，显示简短的表格与小折线图
    - `FilterBar.jsx` — 筛选栏（品种/交易所）与导出按钮
    - `MarketTable.jsx` — 主表格组件，支持排序与小折线图预览
    - `ChartPreview.jsx` — 小折线图渲染组件（预览）
  - `data/`
    - `mockData.js` — 演示用数据（marketData、hotSpots、filters）
  - `styles/`
    - `main.scss` — 全局样式
  - `App.jsx` — 页面组装与导出逻辑

## 快速开始

1. 安装依赖

如果使用 npm：

```powershell
npm install
```

如果使用 pnpm：

```powershell
pnpm install
```

2. 启动开发服务器

```powershell
npm run dev
# 或
pnpm dev
```

3. 在浏览器中打开开发地址（默认 Vite 提示的本地地址）。

## 功能说明

### 筛选
- `FilterBar` 支持两种 filters 格式：
  - 字符串数组（向后兼容）
  - 对象数组 `{ label, value }`（项目当前使用此格式）
- 点击分类或交易所会触发回调到 `App`，父组件会把 `marketData` 按照所选 `category`/`exchange` 过滤并传给 `MarketTable`。

### 表格与排序
- `MarketTable` 支持按列排序（名称、价格、涨幅、隐波百分位等）并提供小折线图预览。
- 表格行数据示例由 `src/data/mockData.js` 提供，演示数据包含 50 条条目，`marketData` 中的每个对象带有 `value`, `category`, `exchange` 字段以便搜索/筛选。

### 导出为 PDF
- 导出按钮会把当前 `MarketTable` 显示的数据导出为 PDF（使用 `jspdf` + `jspdf-autotable`）。
- 字体说明：默认浏览器内置字体不一定支持中文。为了让中文表头/内容正确显示，请把支持中文的 TTF 字体放到 `public/fonts/NotoSansSC-Regular.ttf`，导出时应用会尝试加载并嵌入该字体。
  - 推荐字体：Noto Sans SC（开源，Google 提供）
  - 路径示例：`public/fonts/NotoSansSC-Regular.ttf`

## 数据格式（重要字段）
- filters:
  - `categories`: `[{ label: '全部', value: 'category-0' }, ...]`
  - `exchanges`: `[{ label: '全部', value: 'exchange-0' }, ...]`
- marketData 中每项:
  - `value` (string): 唯一 id，如 `market-0`
  - `category` (string): 对应 filters 中的 value
  - `exchange` (string): 对应 filters 中的 value
  - `name`, `code`, `price`, `changePercent`, `currentVolatility`, `actualVolatility`, `premium`, `remainingTime`, `chartData` 等

## 代码要点与说明
- 在 `FilterBar` 中点击会触发 `onCategoryChange` 与 `onExchangeChange` 回调，父组件 `App` 按照这些值来过滤 `marketData`。
- 导出行为在 `App.jsx` 中的 `handleExport` 实现，导出列为：名称、代码、最新价、标的涨幅%、当月隐波、实波、溢价、剩余时间。
- `HotSpotCard.jsx` 已实现对 `changePercent` 的空值防御（避免在 undefined 上调用 startsWith），并把标题的最后两个字符染红以突出显示。

## 常见问题
- 中文导出乱码：请按上文“导出为 PDF”部分把支持中文的 TTF 放到 `public/fonts/`，或在导出前手动 embed 字体。
- 过滤项不生效：请确认 `marketData` 中的 `category`/`exchange` 字段与 `filters` 中的 `value` 匹配。

# React + 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 using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.