【Code With SOLO】一句话让SOLO教孩子绘制数学函数

这个项目域名分配ok了,fun.xshan.top

1.摘要:

通过一句话需求,Code With SOLO全自动完成了一个纯前端的数学函数绘制网站,一键部署,支持绘制常见的函数图像(更多函数例如极坐标函数之类的需要二次开发)。

2.背景:

作为未婚未育的人是怎么想到这个项目的呢,其实这个需求并不稀奇,当前市面上也有很多成型的产品,想做这个项目的需求是一瞬间的想法,但是得益于web端SOLO,随手直接在手机上开动起来,没有让时间把这个想法抹杀掉。

3.实践过程:

实践过程其实真的很简单,一句话,一杯茶,SOLO输出一个可用的也说的过去的成品,对于更高的要求,目前我还没有二次开发,不过我会把后续开发过程随时更新在这个帖子。


整个过程提示词很语义化,讲清楚我的需求即可,剩下的让它自己问我。

开发一个用于展示数学函数可视化的网站,具有美观的UI界面,用户可以输入数学函数,网站可以实施输出这个数学函数的函数图像,并且这个网站可以在cloudflare pages上部署,为当前项目添加git忽略文件,对于不清晰的需求主动问我补全

4.成果展示:

几个问题直接成型,但输出的结果还是比较不错的,还可以一键边缘部署~


还可以多函数叠加显示

Github仓库: ChaseToDream/Function-Visualization

5.效果与总结:

综合来说,这个项目的实现效果还是比较满意的,虽然部分UI有点错位,但是这是由一句白话和三个问题实现的效果,综合耗时只有8min,一杯茶的时间,并且SOLO选择的是可扩展性比较强的方式,便于我后续的二次开发优化和加强项目功能。


后续我也会将二次开发过程放在评论区~我也不知道最后这个项目会成为什么样子

PR#2 feat: 添加数学符号选择功能并升级 FunctionInput 组件

1. 新增数学符号功能设计文档

  • 新增 docs/superpowers/specs/2026-04-14-math-symbols-design.md 文件。
  • 详细阐述了数学符号功能的背景、需求、UI/UX 设计和技术实现方案。
  • 定义了支持的数学符号类型,如基础运算符、三角函数、指数对数、常量等。

2. FunctionInput 组件重大升级

  • src/components/FunctionInput.tsx 中添加了数学符号数据结构和分类列表。
  • 实现了可点击的符号下拉菜单,支持按分类浏览并精确插入符号到光标位置。
  • 集成了表达式格式化功能,自动优化数学表达式的显示格式。
  • 引入了括号匹配检查功能,并在括号不匹配时提供警告提示。
  • 更新了组件布局,新增了符号按钮和格式化按钮。
  • 利用 useRef 精确控制输入框的光标位置,提升用户体验。

:light_bulb: Technical Highlights

  • 用户体验优化: 通过可点击的符号菜单、表达式格式化和括号匹配提示,显著提升了用户编辑数学公式的效率和准确性。
  • 模块化设计: 数学符号数据结构和分类列表的设计,便于未来扩展更多符号类型。
  • 精确光标控制: 结合 useRef 实现的光标位置管理,确保符号插入的准确性。
  • 文档先行: 详细的设计文档为功能开发提供了清晰的指导和规范。

仍存问题:

  • 函数图像布局显示问题
  • 不支持极函数或其他更高等函数图像

PR#3 feat: Graph组件高度自适应

:bullseye: Changes

1. Graph组件高度自适应

  • 将图表初始化时的高度从固定值500px改为动态获取容器高度graphRef.current.clientHeight
  • 将图表更新时的高度从固定值500px改为动态获取容器高度graphRef.current.clientHeight,确保更新时保持高度自适应。

:light_bulb: Technical Highlights

  • 响应式设计: 通过动态获取容器高度,使Graph组件能够更好地适应不同尺寸的容器,提升用户体验。
  • 代码优化: 移除了硬编码的固定高度值,提高了代码的灵活性和可维护性。