使用Trae开发了一个 Excel2SQL 学习网站，把你已知的Excel操作，一一映射到SQL写法，学习曲线直接砍半，适合所有想进阶的数据人。
操作步骤：
1.打开Trae里面的Plan模式，直接沟通你的需求：
我想做一个网站，通过对比Excel功能来学习SQL，网站是Excel2SQL，这样帮助懂Excel但是不懂SQL的人来快速帮助他们学习SQL，这样方便后面的SQL数据分析，请你基于我的需求帮我创建一个网页。
2.基于Trae给你的回复结果，生成一个需求文档，节选文档内容如下：
请帮我构建一个名为 “Excel2SQL” 的单页 Web 应用（单个 HTML 文件，内含所有 CSS/JS）。
产品定位
面向懂 Excel、想学 SQL 的数据分析新手。核心理念：
“你已经会 Excel 了，SQL 只是换了一种说法。”核心功能模块
1. 对比学习卡片库（主体内容）
以双栏对比卡片展示，左边 Excel 操作，右边等价 SQL 写法。
包含以下分类（每类至少 3 个示例）：
- 筛选数据 → WHERE
- 排序 → ORDER BY
- 去重 → DISTINCT
- 统计计算 → SUM/COUNT/AVG/MAX/MIN
- 分组汇总 → GROUP BY（对应 Excel 数据透视表）
- 条件判断 → CASE WHEN（对应 IF 函数）
- 连接多表 → JOIN（对应 VLOOKUP）
- 限制行数 → LIMIT（对应 Excel 筛选前 N 行）
- 文本处理 → CONCAT/SUBSTRING（对应 Excel 文本函数）
- 日期处理 → DATE_FORMAT/YEAR/MONTH（对应 Excel 日期函数）
每张卡片包含：
- Excel 操作截图示意（用 ASCII 风格的表格模拟）
- 对应 SQL 代码（语法高亮）
- 一句话解释"这两个在做同一件事"
- 一个真实业务场景示例（如"找出销售额超过 1 万的订单"）
2. 互动练习区
- 提供 3-5 道题，题目描述 Excel 操作场景
- 用户手动输入 SQL 答案
- 点击"检查答案"后给出对错反馈和标准答案
3. 速查手册（Cheat Sheet）
一个紧凑的对照表，Excel 函数 ↔ SQL 关键词，方便快速检索
4. 学习进度追踪
记录用户已查看的卡片，显示学习进度百分比（用 localStorage 存储）
设计风格
- 整体风格：现代简洁，偏向技术感但不冷漠
- 配色：深色主题，以深蓝/深灰为底，绿色或青色作为 SQL 代码高亮色
- Excel 侧用绿色调（呼应 Excel 品牌色），SQL 侧用蓝色调
- 字体：代码部分用 monospace，UI 文字用现代无衬线字体
- 移动端友好（响应式布局）
- 左右对比卡片在手机端改为上下堆叠
技术要求
- 纯单文件 HTML（含内联 CSS 和 JS），不依赖外部框架
- 可从 CDN 引入 highlight.js 做代码高亮
- 不需要后端，所有内容硬编码在前端
- 练习题答案校验用简单字符串匹配（忽略大小写和多余空格）
导航结构
顶部导航栏：Logo | 对比学习 | 互动练习 | 速查手册
单页内滚动或 tab 切换均可示例卡片参考（按此格式生成所有卡片）：
VLOOKUP → LEFT JOIN
- Excel：=VLOOKUP(A2, 产品表!A:B, 2, 0) 从产品表匹配名称
- SQL：SELECT o.*, p.name FROM orders o LEFT JOIN products p ON o.product_id = p.id
- 一句话：都是"拿一张表的字段，去另一张表里找匹配的值"
- 场景：订单表里只有产品 ID，想显示产品名称
请确保内容准确、代码可直接使用、界面专业美观。
3.预览并发布，有个人的需求还可以修改。
全程无需代码编程基础，小白也能快速上手！
