Hello, World! 
你是谁
自由职业者
你是怎么用 TRAE 把 Demo 做出来的：
- 设定工作区，方便上下文、不用窗口切换
- 所采用的开发架构和包，官方有 SKILL 和 MCP Server 的定要在 Trae 配置上
- 订阅 Trae Pro，可用量用完后，升级为 Pro+，最大化的提高开发效率
- Trae 有更新时，即时更新
- 探讨式或 Trea 全包（约束参考行业产品交互最佳实践、行业开发最佳实践）
- 探讨式，提高自己对代码的理解，多问多查询多沟通
- 全包式，大概看看做了什么工作，当开发完成后，多体验流程操作，有觉得不舒服的，再次沟通
开发记
因不可抗拒的原因，相比整个初赛时间期限，只有少量时间可以做，白天断断续续的，更多还是在半夜、凌晨、通宵。没有桌椅，只有一个、两个硬邦邦的小圆凳和一张单人床。没有网络，就用手机热点，手机流量没了，就买流量。初赛要结束了，也到能有 Wi-Fi 和桌椅的环境里了 
1. Demo 简介
是什么
网站（Seashore）：一款专注于发音评估和定制化听力素材的语言学习平台，不仅仅英语。
已正式发布上线，持续迭代升级。
致力于提高用户体验（已实现）
-
响应式设计，兼容多平台访问
-
A11y 无障碍访问
-
UI 界面清爽
-
扁平化操作层级
-
国际化多语言
-
暗黑模式切换
-
鼠标悬停一些按钮上面时，光标变化为手型
-
完整规范的网站 Icon 与 favicon 配置，支持浏览器页签、快捷图标、Apple 触控图标和站点清单文件
-
书写了部分 Open Graph (开放图谱协议) 和 Twitter Card 元数据标签，便于社交平台的预览
-
第三方授权直接登录注册，降低用户注册登录成本（同步头像、昵称）
-
交互反馈。例如表单中的实时输入字符数量统计、错误输入的验证提示
-
降低用户理解成本，例如在发音评估页面的结果中，有“问号”提示，鼠标停留即可显示
-
语义化的 URL 路由设计，建立可预期的产品浏览结构，更符合人类直觉
-
悬浮「回到顶部」按钮，随页面滚动按需显示及隐藏
-
尊重保护用户的隐私和知情权，透明、合规
- 建立服务条款和隐私政策页面
- Cookie 弹框
-
访问速度优化
- 客户端 CDN
- 客户端智能网络路由
- 服务端网关边缘节点
- 服务端全球多节点部署
技术架构（已实现）
-
采用流行成熟度高的编程语言、开发框架、第三方依赖，并使用最新稳定版
-
优先使用同架构、同生态内的包
-
框架、包的版本升级，设定安全缓冲期
-
前后端分离，均为无服务器 Serverless 架构
-
云存储文件
- 多独立子域名（根据业务不同划分）
- 全球内容分发网络 CDN
-
部署在国际顶尖的云计算平台
-
全域 HTTPS
-
代码内配置代码格式化和静态检测命令，代码 Git 提交时自动验证和修复
-
自动化框架、包安全漏洞检测
-
自动化和手动部署（OIDC 身份认证）
-
架构验证 - 阻止无效 API 请求和恶意负载
-
待业务层接入（相关服务已创建）
- 消息队列，进行异步的事务处理
- 文档数据库进行缓存、临时性数据存储
面向谁
任何想学习其他语言的朋友，无关年龄和群体。
主要功能
发音评估
33 种语言的评估。
发音评估 - Seashore
- 总分，准确度、流畅性、完整性、韵律不同纬度的分数
- 错误类别以及对应的错误数量
- 即将提供「AI 总结」功能
- 鼠标移动到「
」图标，显示说明信息
自定义听力语料
- 音视频文件上传，数据库保存，文件云端存储
- 输入文本，由系统转换为仿真，多种风格的听力音频，数据保存
- 嵌入链接，可添加第三方的网络媒体资源，例如 Youtube 等
2. Demo 创作思路
灵感来源
在使用主流的“闯关/路径化”语言学习软件时，想对弱项内容作为跑步时的听力素材。
想解决的问题
- 根据自己喜欢或者想练习的内容定制化听力材料，例如系统化的语言学习软件中的弱项内容、文章段落、视频等组合作为语料。
- 对发音提供评估，并且不仅仅是一个总分。多维度的报告。
为什么做这个方向：你的判断和取舍
- 回想婴幼儿学习语言的过程，纯粹的“听”和“说”起步，母语学的都很好。
- 不做单词，固化路径课程的应用。主流语言软件在词汇和系统化教学上已经做得很好了，不重复造轮子。
- 打卡、路径的方式多少都会有一些压力感，Seashore 以开放的心态给用户一个根据自己兴趣学习的入口。
- AI 默认不开启，用户可按需开启（原因：AI 的不稳定性、用户和平台都需要承担更多的成本）
3. Demo 体验地址
4. TRAE 实践过程
.358888507185108:3e4b5acd1fd18fb4d5402dc3645af599_6a39f75b295a6d0d015d2dfd.6a511c7c096fb1fbe6704751.6a511c7b07e9c623d3015eb8:Trae CN.T(7/11/2026, 12:23:24 AM)
.7472723115408606226:e048b9b8d7426e605497ab1248bee2d0_69501f74c5ec192c255eb0d3.6a53ea0a97ea5d3cdc01017a.6a53ea0a9ac509cb09e652ff:Trae.T(7/13/2026, 3:24:58 AM)
.7472723115408606226:caad1651770ee1bde11b1c0955662342_6a5709c99d410c1b2eec7786.6a5747369d410c1b2eec79f1.6a57473615ae19bc2299ab95:Trae.T(7/15/2026, 4:39:18 PM)
5. 对应的报名审核通过的帖子链接
生产环境更新日志
- 2027-07-21
- 开发依赖包更新
- Header 导航布局调整
- 增加用户仪表盘后台，仪表盘菜单栏和顶部 Header 最终采用上下结构。菜单栏在移动端为左侧侧滑模式
- 修改顶部 Header 导航右侧的内容的图标以及移动端时的文字不可见，只保留图标
- 仪表盘，侧边栏底部增加社交，服务条款，隐私政策链接。侧边栏“窄”形态时，空间有限，只保留社交链接。当从窄变宽的时候，平滑展出，无跳跃感
- 服务端上线个人资料查询和更新接口
- 用户仪表盘提供个人资料的显示和修改
- 2026-07-20
- 仿真开发环境所需服务的部分创建
- 代码优化：路由、服务类、模型等
- 数据表优化，并同步创建到生产环境
- 创建素材页面，文本长度限制规则更新
- 创建素材页面，文本转音频方式，数据库存储
- 创建素材页面，上传音视频方式，创建成功。文件云存储及数据库记录
- 创建素材页面，播放列表下拉中增加「新建」按钮，展示出创建播放列表弹框
- 依赖包更新
- 安装支付 SDK（支付分支）
- 自定义「主题模式」在客户端本地存储的键名
- 隐私政策页面，列出在客户端本地的存储信息
- 登录页面，「登录表示您同意… 」文案，末尾增加隐私政策链接
- 鼠标悬停在登录页面「提交」按钮时，光标变为手型反馈
- 鼠标悬停在 Cookie 弹框的「我接受」按钮时，光标变为手型反馈
- 登录页面，用户名密码的提交按钮，在请求时，禁止多次重复点击发送请求
- 配置架构验证 - 阻拦恶意请求
- 2026-07-19
- 第三方授权登录/注册（同步头像、昵称）
- 技术中对外部服务调用的封装和优化
- 安全地更新开发依赖包
- 底部 Footer 和主内容区域增加一些“呼吸空间”（响应式），视觉更舒服
- 翻译更新
- 增加「Cookie 使用」弹框
- 解决发音评估页面，提交按钮在移动端独占一行问题
- 删除注释的代码，并使用新的实施方案代替
- 创建素材页面，描述文本的留白距离优化
- 发音评估显示出「AI 总结」开关和按钮，后端接收参数
- 创建素材，增加「嵌入链接」方式表单