【学习工作赛道】量化小课堂
标签：学习工作
0. 先和大家打个招呼吧 
你是谁： 一名在校大三学生，对量化交易充满好奇，但面对满屏的代码和枯燥的公式常常望而却步。
你是怎么用 TRAE 把 Demo 做出来的：
说实话，在做这个项目之前，我以为"量化交易可视化教学网站"这种东西只有专业团队才能搞出来。直到我遇到 TRAE——
一开始，我脑子里只有一个模糊的想法：“做一个能让像我这样的小白看懂量化交易的网站”。我把这句话原原本本地讲给 TRAE 听，它没有急着写代码，而是先帮我把业务逻辑理得清清楚楚：市场数据可视化、技术指标演示、策略回测、学习中心……一层一层拆开给我看。那一刻我突然觉得——“原来把想法讲清楚，就已经完成了一半”。
最让我惊喜的是技术细节的处理。比如数据源用东方财富的 API 拉沪深300日K数据，我压根不知道浏览器会有 CORS 跨域问题，TRAE 直接帮我预判了这个坑，给出了 Vite 代理方案和本地降级数据两套方案。还有回测引擎的核心逻辑——逐日遍历K线撮合交易、计算夏普比率和最大回撤——这些我原本以为"肯定搞不定"的部分，TRAE 都带着我一步步落地了。
整个过程中，我最大的感受是：我不是在"写代码"，我是在和 TRAE “对话”。我说需求，它给方案；我提疑问，它讲原理。它帮我跨过的不是某一行代码，而是"我能不能做出来"这道心理坎。
1. Demo 简介
是什么： 一个基于 React + ECharts 的量化交易可视化教学网站，以沪深300指数日K数据为基础，通过交互式图表和回测系统帮助零基础用户理解量化交易。
面向谁： 想学习量化交易但缺乏编程基础的学生、个人投资者、金融爱好者。
主要功能：
- K线图与技术指标教学 —— 交互式展示沪深300日K线图，支持缩放拖拽，可叠加 MA、RSI、MACD、布林带、KDJ 等技术指标，每个指标都配有计算公式和参数说明。
- 策略回测系统 —— 内置均线交叉、突破、布林带、RSI 等经典策略模板，支持参数配置，一键运行回测，自动计算收益率、最大回撤、夏普比率，并可视化净值曲线。
- 学习中心 —— 结构化的量化交易知识体系，从基础概念到策略原理，配合动画演示和交互练习，边学边练。
2. Demo 创作思路
灵感来源：
作为一个对量化交易感兴趣的学生，我发现市面上的学习资源要么太理论（满篇公式），要么太工程（直接上 Python 代码框架），缺少一个"中间层"——能让初学者看见量化交易到底在做什么。一张K线图、一条均线、一次回测，比十页PPT更直观。
想解决的问题：
- 痛点一：量化入门门槛高。初学者面对 “夏普比率”“最大回撤”“金叉死叉” 这些概念时，缺乏直观的可视化理解。
- 痛点二：理论脱离实践。学了均线交叉策略，但没法立刻验证"这个策略到底赚不赚钱"。需要一个零成本、零风险的回测环境。
- 痛点三：数据获取难。个人开发者想拿到真实的行情数据做练习，往往卡在数据源这一步。
为什么做这个方向：
我选择"可视化教学"而非"实盘交易系统"，是因为教学的本质是降低理解成本。一个让小白能看懂、能上手、能试错的平台，比一个功能强大但让人望而生畏的专业工具，对更多人更有价值。数据源固定为沪深300指数，既保证了真实性，又把复杂度控制在可控范围内——专注做好一件事。
3. Demo 体验地址
采用 HTML 交互式文件（Zip 打包上传） 的方式提交。
体验文件：量化小课堂.zip（已上传至社区）
解压后打开
index.html即可体验完整功能，无需安装任何依赖。
4. TRAE 实践过程
以下是使用 TRAE 完成 Demo 开发的完整流程：
步骤一：需求拆解与业务逻辑梳理
通过对话让 TRAE 帮我梳理完整业务逻辑，确定了五大核心模块：市场数据可视化、技术指标演示、策略回测系统、教学模块、数据模拟，并确定了页面路由与布局结构。
步骤二：技能调用与项目规划
TRAE 自动匹配了 quant-education 技能，基于技能规范确定了技术栈（React 18 + TypeScript + ECharts 5 + TailwindCSS 3 + Zustand）、数据源（东方财富沪深300日K API）和项目结构。
步骤三：数据层与核心组件实现
配置 Vite 代理解决 CORS 跨域问题，实现沪深300日K数据获取与解析。随后实现 K线图组件、技术指标计算（MA/RSI/MACD/布林带/KDJ）和回测引擎核心逻辑（逐日遍历撮合 + 统计指标计算）。
步骤四：页面集成与测试优化
完成四个页面（首页、图表教学、策略回测、学习中心）的集成，验证数据降级方案、回测结果正确性和图表大数据量渲染性能。
说明： 以上截图为开发关键步骤示意，实际对话中保留了完整的任务记录。双击 TRAE 对话即可复制对应 Session ID。
5. 对应的报名审核通过的帖子链接
报名审核通过帖子：【学习工作赛道】QuantViz - 量化交易可视化教学平台
Session ID 获取方式： Session ID 是 TRAE 每段对话任务的唯一标识。双击 TRAE 的对话即可复制出来，用于证明作品由 TRAE 开发完成。请在创作时保留关键任务的对话记录。