AShareView/web

ashare-view web

这是 ashare-view 的前端应用，基于 React、TypeScript、Vite、Ant Design 和 ECharts 构建。开发环境通过 Vite 代理访问后端 /api，生产环境由 Go 服务托管构建后的静态资源。

页面

• /：市场概览，展示市场宽度、涨停、跌停和阶段新高。
• /index：指数行情，展示常用指数 K 线和最新涨跌幅。
• /overlay：K 线叠加，输入股票代码后对比多只个股走势。
• /sentiment：情绪导图，展示涨停梯队、焦点股和热门题材线路。
• /high100：阶段新高，展示创 150 日新高的股票。
• /consecutive：连板高度，按连续涨停天数分组。
• /trend：每日趋势，展示市场宽度、涨跌停和连板数量变化。

开发命令

npm ci
# 先启动后端；根目录 start.cmd 启动的服务会被自动发现。
npm run dev

常用脚本：

• npm run dev：启动 Vite 开发服务器。
• npm run build：执行 TypeScript 构建检查并生成生产包。
• npm run lint：运行 ESLint。
• npm run preview：预览 dist 构建产物。

API 代理

Vite 开发服务和预览服务均使用系统分配的随机端口，访问终端输出的实际地址。/api 代理优先读取 ASHARE_API_TARGET；未设置时读取根目录启动脚本生成的 .runtime/server.json。

手动启动后端时，使用日志中 Server running on 后的实际地址：

$env:ASHARE_API_TARGET = '粘贴后端日志中的实际 HTTP 地址'
npm run dev

后端端口变化后需重新启动 Vite。npm run build 不依赖后端运行状态或地址配置。

目录约定

src
├── api
│   ├── dashboard.ts  # API 请求封装
│   └── types.ts      # 接口类型
├── components        # 图表、表格列、日期导航、加载组件
├── constants         # 导航和市场常量
├── hooks             # 通用 hooks
├── pages             # 页面组件
├── App.tsx           # 路由和 Ant Design 布局
└── main.tsx          # React 入口

开发约定

• 新增后端接口时，同步更新 src/api/types.ts 和 src/api/dashboard.ts。
• 新增页面时，在 src/App.tsx 注册路由，并在 src/constants/navigation.tsx 增加菜单项。
• 通用加载状态优先复用 components/LoadingBlock.tsx。
• 股票列表列配置优先复用 components/stockColumns.tsx，避免各页面格式不一致。
• 日期筛选优先复用 components/DateNav.tsx，保持历史日期查询体验一致。
• 图表组件基于 ECharts，接口数据尽量在页面层整理好后再传入图表组件。

生产构建

npm run build

构建产物输出到 dist。根目录 Dockerfile 会将其复制到 server/router/webdist 并嵌入 Go 程序，由 Gin 提供静态资源和 SPA fallback。Windows 双击根目录 start.cmd 即可构建并打开使用随机端口的完整应用。