# tc.xgt

**Repository Path**: eshax/tc.xgt

## Basic Information

- **Project Name**: tc.xgt
- **Description**: 题材看板之选股通
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-10-09
- **Last Updated**: 2026-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 股票数据分析平台 · 选股通（XGT）

基于 Vue 3 + Element Plus 的股票数据分析看板，数据源为选股通（xuangubao）股票池接口。
单页应用，暗色主题，按题材分格展示涨停 / 跌停 / 炸板等股票池数据，并支持按日期回溯与盘中自动更新。

## 技术栈

| 依赖 | 说明 |
| --- | --- |
| Vue 3 | `<script setup>` 单文件组件 |
| Element Plus | `el-header / el-main / el-button / el-button-group / el-date-picker / el-skeleton / el-alert / el-empty / el-popover` |
| Axios | 请求股票池接口 |
| Vite | 构建（`base: './'`，可直接部署到任意子目录） |
| Font Awesome 4.7 | 图标（CDN 引入） |

## 目录结构

```
index.html              入口，含 Font Awesome CDN
vite.config.js
vite.config.singlefile.js  单文件 mjs 打包配置
src/
  main.js               createApp + ElementPlus
  style.css             全局 body 暗色样式
  App.vue               根组件 .app-container
  views/
    XGT.vue             选股通页面（模板 + 逻辑 + 作用域样式）
```

## 运行

```bash
npm install
npm run dev      # 本地开发 http://localhost:5173
npm run build    # 产物输出到 dist/
npm run preview  # 预览构建产物
```

### 单文件 mjs（pm2 直接运行）

```bash
npm run build:mjs        # 产物：dist-mjs/tc.xgt.mjs（单文件）
npm run start            # 本地运行，默认 http://0.0.0.0:3000
pm2 start dist-mjs/tc.xgt.mjs --name tc-xgt
# 自定义端口（Linux/macOS）
PORT=8080 pm2 start dist-mjs/tc.xgt.mjs --name tc-xgt
# 自定义端口（Windows PowerShell）
$env:PORT=8080; pm2 start dist-mjs/tc.xgt.mjs --name tc-xgt
```

`tc.xgt.mjs` 是一个自包含的 Node 服务：

- 前端 JS 与全部 CSS（Element Plus + 全局样式 + 组件作用域样式）内联在文件内，运行时不产生任何静态资源请求
- 内置 `node:http` 服务，提供 `/`（页面）、`/tc.xgt.mjs`（脚本）、`/health`（健康检查）
- 支持 gzip 压缩，`PORT`（默认 3000）与 `HOST`（默认 `0.0.0.0`）环境变量
- 仅依赖 Node 内置模块，无需 `node_modules` 即可部署

Font Awesome 图标仍由页面中的 CDN `<link>` 提供，需要外网可访问。配置见 `vite.config.singlefile.js`。

## 数据接口

选股通股票池接口，浏览器可跨域直连（`Access-Control-Allow-Origin: *`）：

```
GET https://flash-api.xuangubao.com.cn/api/pool/detail?pool_name={pool}&date={YYYY-MM-DD}
```

- `pool_name`：`limit_up` / `yesterday_limit_up` / `limit_up_broken` / `super_stock` / `limit_down`
- `date`：可选，不传为当日
- 返回 `code === 20000` 时取 `data` 数组，否则按空数组处理

单条数据关键字段：`symbol`、`stock_chi_name`、`price`、`change_percent`、
`limit_up_days`、`m_days_n_boards_days`、`m_days_n_boards_boards`、
`first_limit_up`、`break_limit_up_times`、`surge_reason.stock_reason`、
`surge_reason.related_plates[].plate_name`。

## 页面功能

- **顶部栏**：数据源按钮组（涨停 / 昨日涨停 / 炸板 / 强势 / 跌停）、统计（总股票数、题材数量、数据日期、自动更新开关）、日期选择器、上一日 / 下一日（自动跳过周末）。
- **主体**：3 行 × 8 列共 24 个题材卡片，前 23 个按题材展示，其余合并为「其他题材」。
- **排序**：题材按最大连板数 → 股票数 → 名称排序；个股按连板数 → 首次涨停时间 → 涨跌幅排序。
- **展示**：连板指标、股票代码（创业板 30x / 科创板 68x 标红）、股票名（点击弹出涨停原因与其他题材）、涨跌幅（涨红跌绿）。
- **状态**：ST 股票过滤、多板块属性高亮、新增 / 变动数据脉冲动画、加载骨架屏、失败提示。
- **自动更新**：盘中 09:00–15:00 自动开启，每 3 秒轮询，每 60 秒检查一次开关状态；可手动切换。

## 实现说明

- **图标**：`fa-*` 图标依赖 Font Awesome 4.7，由 `index.html` 中的 CDN `<link>` 提供；若需离线部署，可将其下载到本地并改为本地引用。
- **`el-popover` 插槽用法**：Element Plus 中触发元素是 `#reference`，弹层内容是默认插槽。股票名放在 `#reference`，涨停原因与其他题材放在默认插槽。
- **标题组件**：Element Plus 未提供 `ElTitle`，标题使用 `<h3 class="el-title">` 并沿用 `.header-title .el-title` 样式。
- **更新提示**：右上「数据已更新」浮层当前由 `showUpdateTip` 控制，仅在已处于显示状态时自动关闭；如需在检测到数据变动时主动弹出，可在 `fetchData` 中按需置为 `true`。