# stock kline

**Repository Path**: bendon/stock-kline

## Basic Information

- **Project Name**: stock kline
- **Description**: 股票K线查看
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-07
- **Last Updated**: 2026-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# A股K线图

纯前端 React + TypeScript + ECharts 股票K线展示系统，支持A股（沪深）日/周/月线查看。数据源为东方财富公开API，通过 Nginx 反向代理解决浏览器跨域限制。

## 技术栈

| 层面 | 选择 |
|------|------|
| 框架 | React 18 + TypeScript |
| 构建 | Vite |
| 图表 | ECharts 5 |
| 数据源 | 东方财富公开API（Nginx反向代理） |
| 部署 | Docker 多阶段构建（node:22-alpine → nginx:alpine） |

---

## 功能明细

### K线图表

- **K线主体** — 红涨绿跌 candlestick，显示开盘/收盘/最高/最低
- **MA均线** — MA5（橙）/ MA10（蓝）/ MA20（紫）/ MA60（绿）叠加显示
- **KDJ指标** — K/D/J 三条线 + 20/80 超买超卖虚线参考，Y轴自适应（J值可超出0-100）
- **成交量** — 柱状图副窗口，涨红跌绿
- **图表布局** — K线 → KDJ → 成交量 纵向三区域

### 周期切换

- 日线 / 周线 / 月线 一键切换
- 切换周期时保留 URL date 参数，自动在新周期中定位对应K线并高亮
- 切换周期时保留用户缩放级别（同周期 localStorage 持久化）

### 背景色带

- 日线 → 按周交替底色
- 周线 → 按月交替底色
- 月线 → 按年交替底色
- 两种极低吸引度颜色（rgba 透明度 0.015~0.025）
- 顶部「背景」开关按钮，状态 localStorage 持久化
- 切换背景不影响缩放位置

### 图表交互

- **鼠标悬停** — 十字光标 + 自定义 tooltip（日期、开高低收、涨跌幅、MA值、KDJ值、成交量）
- **拖拽/滚轮** — ECharts dataZoom 缩放和平移
- **键盘缩放** — 鼠标悬停图表时，`↑` 放大（范围缩小20%）、`↓` 缩小（范围扩大25%），以当前中心为基准
- **点击选中** — 点击K线竖列任意位置（实体/影线/柱间空白）选中当前K线，金色边框+发光高亮，再次点击取消
- **URL定位** — `?date=2024-06-15` 参数自动定位并高亮对应K线（日线直接匹配，周线匹配所属周一，月线匹配所属月份）
- **缩放持久化** — 每次缩放/平移自动保存到 localStorage（按日/周/月分别存储 key: `kline_zoom_{period}`），刷新恢复
- **默认显示** — 默认约 120 根K线，切换股票不改变显示范围
- **移动端** — `touch-action: none` 防止双指缩放触发页面缩放

### 股票搜索

- 支持**代码**、**中文名称**、**拼音**搜索
- 输入防抖 300ms
- 下拉建议列表，键盘 `↑↓` 选择、`Enter` 确认、`Esc` 关闭
- **全局键盘聚焦** — 页面任意位置按字母/数字/中文键自动聚焦搜索框，无需鼠标点击

### 左侧信息面板

- **可折叠** — 折叠按钮在侧边栏顶部，统一收起股票信息 + 最近查询，仅留 28px 窄条
- **折叠持久化** — localStorage（key: `kline_panel_visible`），刷新保持
- **URL 覆盖** — `?panel=hide` / `?panel=show` 可临时覆盖，不改变 localStorage
- **股票信息** — 名称、代码、最新价、涨跌额、涨跌幅
- **基本面数据** — 市盈率(动)、市净率、换手率、总市值、流通市值
- **选中K线详情** — 点击或URL定位选中某根K线后，面板底部显示该K线的日期、周期类型（日线/周线/月线）、开盘/最高/最低/收盘/涨跌幅/成交量，未选中默认不显示

### 最近查询列表

- 每支查询过的股票自动记录（数据就绪后才记录，避免占位名称）
- 去重：同 code+market 只保留最新一条
- 排序：最新查询在最上面
- 最多 100 条，超长可滚动
- 点击快速切换到该股票（保留当前周期）
- 单条删除（`×` 按钮 + `window.confirm` 确认）
- 全部清空（「清空」按钮 + `window.confirm` 确认）
- localStorage 持久化（key: `kline_recent_stocks`）

### URL 路由参数

```
?code=600519&market=1&period=day&date=2024-06-15&panel=hide
```

| 参数 | 说明 | 默认值 |
|------|------|--------|
| `code` | 股票代码 | `000001` |
| `market` | 市场 1=上证 0=深证 | 自动推断 |
| `period` | 周期 day/week/month | `day` |
| `date` | 定位日期（日线精确、周/月线模糊匹配） | 无 |
| `panel` | 面板可见性 show/hide | 使用 localStorage |

- 点击K线自动同步 URL date 参数，可复制分享
- 支持浏览器前进/后退（popstate）
- 切换股票保留当前周期

### 全屏模式

- 顶部「全屏」按钮，使用浏览器 Fullscreen API
- ESC 或再次点击退出全屏

---

## 本地开发

```bash
npm install
npm run dev        # http://localhost:5173（Vite proxy 自动转发 API）
npm run build      # 构建到 dist/
```

## Docker 构建与推送

```bash
buildctl --addr tcp://192.168.137.71:31234 build \
  --frontend dockerfile.v0 \
  --local context=. \
  --local dockerfile=. \
  --output type=image,name=registry.cn-chengdu.aliyuncs.com/bendon/stock-kline:latest,push=true

# 或用 docker
docker build -t registry.cn-chengdu.aliyuncs.com/bendon/stock-kline:latest .
docker push registry.cn-chengdu.aliyuncs.com/bendon/stock-kline:latest
```

## 部署

```bash
docker pull registry.cn-chengdu.aliyuncs.com/bendon/stock-kline:latest
docker run -d -p 8080:80 registry.cn-chengdu.aliyuncs.com/bendon/stock-kline:latest
```

访问 `http://localhost:8080` 或通过反向代理绑定域名。

### Nginx 反向代理

镜像内置 nginx 配置，将 `/api/*` 请求反向代理到东方财富服务器，解决浏览器跨域限制：

- `/api/suggest` → `searchapi.eastmoney.com`
- `/api/kline` → `push2his.eastmoney.com`
- `/api/quote` → `push2.eastmoney.com`

开发环境由 Vite `server.proxy` 自动处理。

### Dockerfile

多阶段构建，最终镜像基于 `nginx:alpine`，安装 `ca-certificates` 以支持 HTTPS 上游代理，总大小约 20MB。