tick-stock-panel前端工程拆解React 18 TanStack Query Lightweight Charts实时图表完整指南【免费下载链接】tick-stock-panelTSP自托管、零运维的 A 股「选股 监控 回测」量化工作台 | LLM能力驱使策略定制个股分析复盘 | 自由接入第三方数据源与个性化扩展数据 | 个人开源项目地址: https://gitcode.com/GitHub_Trending/ti/tick-stock-paneltick-stock-panel是一款自托管、零运维的 A 股「选股 监控 回测」量化工作台。本文拆解它的前端工程实现基于 React 18、TanStack Query 与 Lightweight Charts 构建的实时图表体系带你快速看懂这个开源项目的工程思路适合想学习 React 数据驱动 UI 的新手读者。一、前端技术栈全景打开 frontend/package.json 就能看清整套选型核心依赖非常克制分类技术作用框架React 18.3 TypeScript 5.5组件化 UI 类型安全构建Vite 5秒级启动、产物拆分路由React Router 6全页面懒加载服务端状态tanstack/react-query v5缓存、去重、失效刷新实时原生 SSEEventSource行情推送、策略告警K线lightweight-charts 4.x高性能蜡烛图统计图ECharts 5.5回测曲线、板块分析列表tanstack/react-virtual虚拟滚动万行不卡整体风格是「小依赖 强约定」没有引入 Redux 一类全局状态库服务端状态全部交给 TanStack Query本地 UI 状态用 Hooks 管理依赖越少维护成本越低。二、React 18 路由全页面懒加载与路由守卫路由定义在 frontend/src/router.tsx。两个值得学习的点1. 页面级代码分割。看板、回测、监控等所有业务页面都用React.lazy动态导入只有 Layout、登录、向导等「外壳」保持同步加载。配合 Vite 的manualChunks把 ECharts、lightweight-charts 拆成独立 chunk见 frontend/vite.config.ts首屏体积大幅缩小打开速度快。2. 首次使用守卫。OnboardingGuard组件检查设置中的onboarding_completed标记未完成向导则重定向到/onboarding。细节上做得很稳只在本地无缓存时才显示占位后台重取时直接放行避免切页整屏闪烁查询出错时宁可放行也不把用户卡在空白页。扩展机制也走路由frontend/src/extensions/目录下的扩展注册表可以动态注入路由第三方扩展页面会被ExtensionBoundary包裹扩展出错不影响主应用——这是「自由接入第三方数据源」能力在前端的落点。三、TanStack Query服务端状态的统一管理这是整个前端的「数据骨架」核心在三个文件frontend/src/lib/queryKeys.ts— 集中管理所有 Query Key。新增一个查询只需加一行所有消费方自动引用SSE 失效刷新基于 Key 前缀列表新 Key 不用改实时流代码。frontend/src/lib/useSharedQueries.ts— 共享 query hooks消除多页面重复的useQuery调用。frontend/src/main.tsx— 全局QueryClient配置。全局配置里有几个精心设计staleTime 5 秒同一 Key 的缓存 5 秒内直接复用多页面共享一份数据不重复请求refetchOnWindowFocus 关闭切回窗口不重拉减少无意义请求实时数据交给 SSE 推送401 全局拦截通过QueryCache的onError钩子任何请求收到「未登录/会话过期」统一跳转登录页且排除登录页自身请求避免死循环。文件头注释还写明了一条核心原则实时数据走 SSE invalidation无需前端轮询只有管线进度这类非 SSE 数据才用refetchInterval定时重取。一个典型的「Key 设计防坑」案例自选股的日K批量查询 Key 刻意不使用watchlist-前缀。因为实时行情推送每秒都可能触发一次前缀失效日K历史几乎不变若被高频失效会导致全自选日K每秒重拉。这类细节在 queryKeys.ts 的注释中都有说明是很好的工程文档范例。四、SSE 实时行情流推送驱动缓存失效实时能力的核心是 frontend/src/lib/useQuoteStream.ts它挂在顶层 Layout 全局运行一次建立 SSE 连接/api/intraday/stream监听quotes_updated行情更新、strategy_alert策略告警、depth_updated五档修正、review_progress复盘流式进度等事件定向失效缓存收到行情推送后按用户配置过滤页面开关只对开启的页面做invalidateQueries按前缀匹配让所有相关useQuery自动重取——组件本身完全无感知断线重连指数退避2 的 n 次方递增上限 60 秒连续失败 3 次弹一次 toast 提示「实时连接已断开正在重连…」恢复后重置计数连接状态可视化用模块级 store useSyncExternalStore暴露connected / reconnecting / disconnected状态顶部导航渲染徽标断开不会无感知。最精巧的是「焦点股票日K增量刷新」当个股对话框打开时注册当前 symbol行情推送时只请求该股票当日最新一根日KklineDailyLatest再用 frontend/src/lib/kline.ts 中的mergeLatestKlineRow把它原位合并进已有缓存的尾部——不重新下载整段历史日K曲线盘中平滑跳动零闪烁、零重复请求。五、Lightweight ChartsK线实时图表实现K线图表封装在 frontend/src/components/CandlestickChart.tsx是学习 Lightweight Charts 用法的教科书式示例双价格轴布局蜡烛图占上方 80%成交量柱状图挂在独立volume价格轴并压缩到底部 20%scaleMargins: { top: 0.8 }红涨绿跌按 A 股习惯配置#F04438/#12B76A配色主题即时切换切明暗主题时只调chart.applyOptions更新文字、网格、边框颜色无需重建图表自适应容器ResizeObserver监听宽度变化同步更新图表窗口拉伸不破图生命周期清理组件卸载时chart.remove()释放画布避免内存泄漏可视范围控制数据超过 60 根时默认聚焦最近 60 根否则fitContent全量铺满。数据侧则由 frontend/src/lib/kline.ts 统一管理查询配置图表与信息条共享同一 cache key 只发一次请求placeholderData内置「仅同 symbol 占位」守卫——改日期范围时旧数据可暂显不闪烁切股票时绝不透传上一只的数据不误显示。分时图还有专门的「轮询停表」逻辑周末、盘后、翻看历史日期时数据不可变轮询自动停表消除无效请求。六、开发体验Vite 代理与 SSE 零缓冲frontend/vite.config.ts 里有个容易忽略但关键的配置dev 模式下/api代理转发到后端对含/stream的请求强制设置Accept: text/event-stream、Cache-Control: no-cache禁用代理缓冲——否则 SSE 事件会被代理攒着不转发实时行情直接失效。这是「前端连不上实时推送」类问题的常见根源项目里已提前排雷。本地启动只需执行根目录的 dev.shWindows 用 dev.ps1前后端一键拉起这也是「零运维」定位的一部分。七、关键文件速查文件职责frontend/src/main.tsx应用入口、QueryClient 全局配置、401 拦截frontend/src/router.tsx懒加载路由、Onboarding 守卫、扩展路由注入frontend/src/lib/queryKeys.tsQuery Key 集中管理frontend/src/lib/useQuoteStream.tsSSE 实时流、退避重连、缓存失效frontend/src/lib/kline.ts日K/分时查询配置、增量合并、轮询停表frontend/src/components/CandlestickChart.tsxLightweight Charts 蜡烛图封装frontend/src/components/EChartsIntraday.tsxECharts 分时图frontend/src/extensions/registry.ts前端扩展注册表总结tick-stock-panel 的前端工程可以归纳为三条主线React 18 全页面懒加载保证首屏速度TanStack Query 统一管理服务端状态以「集中 Key SSE 失效」替代前端轮询Lightweight Charts ECharts 双图表引擎分别承担 K线高性能渲染与统计分析。整套方案依赖少、约定清晰、注释即文档对想学习「数据驱动型 React 应用」的开发者来说是一份非常值得研读的实战样本。【免费下载链接】tick-stock-panelTSP自托管、零运维的 A 股「选股 监控 回测」量化工作台 | LLM能力驱使策略定制个股分析复盘 | 自由接入第三方数据源与个性化扩展数据 | 个人开源项目地址: https://gitcode.com/GitHub_Trending/ti/tick-stock-panel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
tick-stock-panel前端工程拆解React 18 TanStack Query Lightweight Charts实时图表完整指南【免费下载链接】tick-stock-panelTSP自托管、零运维的 A 股「选股 监控 回测」量化工作台 | LLM能力驱使策略定制个股分析复盘 | 自由接入第三方数据源与个性化扩展数据 | 个人开源项目地址: https://gitcode.com/GitHub_Trending/ti/tick-stock-paneltick-stock-panel是一款自托管、零运维的 A 股「选股 监控 回测」量化工作台。本文拆解它的前端工程实现基于 React 18、TanStack Query 与 Lightweight Charts 构建的实时图表体系带你快速看懂这个开源项目的工程思路适合想学习 React 数据驱动 UI 的新手读者。一、前端技术栈全景打开 frontend/package.json 就能看清整套选型核心依赖非常克制分类技术作用框架React 18.3 TypeScript 5.5组件化 UI 类型安全构建Vite 5秒级启动、产物拆分路由React Router 6全页面懒加载服务端状态tanstack/react-query v5缓存、去重、失效刷新实时原生 SSEEventSource行情推送、策略告警K线lightweight-charts 4.x高性能蜡烛图统计图ECharts 5.5回测曲线、板块分析列表tanstack/react-virtual虚拟滚动万行不卡整体风格是「小依赖 强约定」没有引入 Redux 一类全局状态库服务端状态全部交给 TanStack Query本地 UI 状态用 Hooks 管理依赖越少维护成本越低。二、React 18 路由全页面懒加载与路由守卫路由定义在 frontend/src/router.tsx。两个值得学习的点1. 页面级代码分割。看板、回测、监控等所有业务页面都用React.lazy动态导入只有 Layout、登录、向导等「外壳」保持同步加载。配合 Vite 的manualChunks把 ECharts、lightweight-charts 拆成独立 chunk见 frontend/vite.config.ts首屏体积大幅缩小打开速度快。2. 首次使用守卫。OnboardingGuard组件检查设置中的onboarding_completed标记未完成向导则重定向到/onboarding。细节上做得很稳只在本地无缓存时才显示占位后台重取时直接放行避免切页整屏闪烁查询出错时宁可放行也不把用户卡在空白页。扩展机制也走路由frontend/src/extensions/目录下的扩展注册表可以动态注入路由第三方扩展页面会被ExtensionBoundary包裹扩展出错不影响主应用——这是「自由接入第三方数据源」能力在前端的落点。三、TanStack Query服务端状态的统一管理这是整个前端的「数据骨架」核心在三个文件frontend/src/lib/queryKeys.ts— 集中管理所有 Query Key。新增一个查询只需加一行所有消费方自动引用SSE 失效刷新基于 Key 前缀列表新 Key 不用改实时流代码。frontend/src/lib/useSharedQueries.ts— 共享 query hooks消除多页面重复的useQuery调用。frontend/src/main.tsx— 全局QueryClient配置。全局配置里有几个精心设计staleTime 5 秒同一 Key 的缓存 5 秒内直接复用多页面共享一份数据不重复请求refetchOnWindowFocus 关闭切回窗口不重拉减少无意义请求实时数据交给 SSE 推送401 全局拦截通过QueryCache的onError钩子任何请求收到「未登录/会话过期」统一跳转登录页且排除登录页自身请求避免死循环。文件头注释还写明了一条核心原则实时数据走 SSE invalidation无需前端轮询只有管线进度这类非 SSE 数据才用refetchInterval定时重取。一个典型的「Key 设计防坑」案例自选股的日K批量查询 Key 刻意不使用watchlist-前缀。因为实时行情推送每秒都可能触发一次前缀失效日K历史几乎不变若被高频失效会导致全自选日K每秒重拉。这类细节在 queryKeys.ts 的注释中都有说明是很好的工程文档范例。四、SSE 实时行情流推送驱动缓存失效实时能力的核心是 frontend/src/lib/useQuoteStream.ts它挂在顶层 Layout 全局运行一次建立 SSE 连接/api/intraday/stream监听quotes_updated行情更新、strategy_alert策略告警、depth_updated五档修正、review_progress复盘流式进度等事件定向失效缓存收到行情推送后按用户配置过滤页面开关只对开启的页面做invalidateQueries按前缀匹配让所有相关useQuery自动重取——组件本身完全无感知断线重连指数退避2 的 n 次方递增上限 60 秒连续失败 3 次弹一次 toast 提示「实时连接已断开正在重连…」恢复后重置计数连接状态可视化用模块级 store useSyncExternalStore暴露connected / reconnecting / disconnected状态顶部导航渲染徽标断开不会无感知。最精巧的是「焦点股票日K增量刷新」当个股对话框打开时注册当前 symbol行情推送时只请求该股票当日最新一根日KklineDailyLatest再用 frontend/src/lib/kline.ts 中的mergeLatestKlineRow把它原位合并进已有缓存的尾部——不重新下载整段历史日K曲线盘中平滑跳动零闪烁、零重复请求。五、Lightweight ChartsK线实时图表实现K线图表封装在 frontend/src/components/CandlestickChart.tsx是学习 Lightweight Charts 用法的教科书式示例双价格轴布局蜡烛图占上方 80%成交量柱状图挂在独立volume价格轴并压缩到底部 20%scaleMargins: { top: 0.8 }红涨绿跌按 A 股习惯配置#F04438/#12B76A配色主题即时切换切明暗主题时只调chart.applyOptions更新文字、网格、边框颜色无需重建图表自适应容器ResizeObserver监听宽度变化同步更新图表窗口拉伸不破图生命周期清理组件卸载时chart.remove()释放画布避免内存泄漏可视范围控制数据超过 60 根时默认聚焦最近 60 根否则fitContent全量铺满。数据侧则由 frontend/src/lib/kline.ts 统一管理查询配置图表与信息条共享同一 cache key 只发一次请求placeholderData内置「仅同 symbol 占位」守卫——改日期范围时旧数据可暂显不闪烁切股票时绝不透传上一只的数据不误显示。分时图还有专门的「轮询停表」逻辑周末、盘后、翻看历史日期时数据不可变轮询自动停表消除无效请求。六、开发体验Vite 代理与 SSE 零缓冲frontend/vite.config.ts 里有个容易忽略但关键的配置dev 模式下/api代理转发到后端对含/stream的请求强制设置Accept: text/event-stream、Cache-Control: no-cache禁用代理缓冲——否则 SSE 事件会被代理攒着不转发实时行情直接失效。这是「前端连不上实时推送」类问题的常见根源项目里已提前排雷。本地启动只需执行根目录的 dev.shWindows 用 dev.ps1前后端一键拉起这也是「零运维」定位的一部分。七、关键文件速查文件职责frontend/src/main.tsx应用入口、QueryClient 全局配置、401 拦截frontend/src/router.tsx懒加载路由、Onboarding 守卫、扩展路由注入frontend/src/lib/queryKeys.tsQuery Key 集中管理frontend/src/lib/useQuoteStream.tsSSE 实时流、退避重连、缓存失效frontend/src/lib/kline.ts日K/分时查询配置、增量合并、轮询停表frontend/src/components/CandlestickChart.tsxLightweight Charts 蜡烛图封装frontend/src/components/EChartsIntraday.tsxECharts 分时图frontend/src/extensions/registry.ts前端扩展注册表总结tick-stock-panel 的前端工程可以归纳为三条主线React 18 全页面懒加载保证首屏速度TanStack Query 统一管理服务端状态以「集中 Key SSE 失效」替代前端轮询Lightweight Charts ECharts 双图表引擎分别承担 K线高性能渲染与统计分析。整套方案依赖少、约定清晰、注释即文档对想学习「数据驱动型 React 应用」的开发者来说是一份非常值得研读的实战样本。【免费下载链接】tick-stock-panelTSP自托管、零运维的 A 股「选股 监控 回测」量化工作台 | LLM能力驱使策略定制个股分析复盘 | 自由接入第三方数据源与个性化扩展数据 | 个人开源项目地址: https://gitcode.com/GitHub_Trending/ti/tick-stock-panel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
